Social Post Card

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<article class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
  <div class="p-5">
    <div class="flex items-center gap-3 mb-4">
      <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&h=128&fit=crop&crop=faces" alt="Sarah Mitchell" class="w-12 h-12 rounded-full object-cover">
      <div class="flex-1">
        <div class="flex items-center gap-2">
          <h4 class="font-semibold text-gray-900">Sarah Mitchell</h4>
          <span class="px-2 py-0.5 bg-blue-100 text-blue-600 text-xs font-medium rounded-full">PRO</span>
        </div>
        <p class="text-sm text-gray-500">Product Designer • 2h ago</p>
      </div>
      <button class="p-2 hover:bg-gray-100 rounded-full text-gray-400 hover:text-gray-600">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"/>
        </svg>
      </button>
    </div>
    
    <p class="text-gray-700 leading-relaxed mb-4">Just shipped a major redesign after 3 months of work! 🚀 The new design system includes over 200 components with full dark mode support and accessibility built-in. Can't wait to share more details soon. <span class="text-blue-600">#design #uidesign #productdesign</span></p>
    
    <img src="https://images.unsplash.com/photo-1618788372246-79faff0c3742?w=600&h=400&fit=crop" alt="Design preview" class="w-full rounded-xl mb-4">
  </div>
  
  <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-between">
    <div class="flex items-center gap-6">
      <button class="flex items-center gap-2 text-gray-500 hover:text-pink-600 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
        </svg>
        <span class="text-sm font-medium">2,847</span>
      </button>
      <button class="flex items-center gap-2 text-gray-500 hover:text-blue-600 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
        </svg>
        <span class="text-sm font-medium">384</span>
      </button>
      <button class="flex items-center gap-2 text-gray-500 hover:text-green-600 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
        </svg>
        <span class="text-sm font-medium">Share</span>
      </button>
    </div>
    <button class="p-2 hover:bg-gray-100 rounded-full text-gray-400 hover:text-gray-600">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
      </svg>
    </button>
  </div>
</article>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# Social Post Card

Social media style post card.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Author row
- Body content
- Engagement actions

## Usage

```bash
npx devsnips add Tailwind/Components/Cards/social-post-card
```

Copy from `code.html`.

## Customization

- Avatar, action icons, spacing

## Accessibility

- Real buttons for actions; meaningful labels

## Dependencies

- Tailwind CSS only

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`