Blog 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

<article class="group bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition-shadow">
  <div class="relative h-48 overflow-hidden">
    <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&h=400&fit=crop" alt="Blog post cover" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
    <div class="absolute bottom-4 left-4 right-4">
      <span class="inline-block px-3 py-1 bg-blue-600 text-white text-xs font-semibold rounded-full mb-2">DESIGN</span>
      <h3 class="text-xl font-bold text-white leading-tight group-hover:text-blue-200 transition-colors">The Future of UI Design: Trends to Watch in 2025</h3>
    </div>
  </div>
  
  <div class="p-5">
    <div class="flex items-center gap-4 text-sm text-gray-500 mb-4">
      <div class="flex items-center gap-2">
        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=faces" alt="Author" class="w-8 h-8 rounded-full object-cover">
        <span>Sarah Mitchell</span>
      </div>
      <span>•</span>
      <time datetime="2025-01-15">Jan 15, 2025</time>
      <span>•</span>
      <span>8 min read</span>
    </div>
    
    <p class="text-gray-600 text-sm leading-relaxed mb-4">Discover the emerging design patterns and technologies that will shape user interfaces in the coming year, from AI-powered components to immersive 3D experiences.</p>
    
    <div class="flex items-center justify-between pt-4 border-t border-gray-100">
      <div class="flex gap-3">
        <button class="flex items-center gap-1.5 text-sm text-gray-500 hover:text-blue-600 transition-colors">
          <svg class="w-4 h-4" 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>234</span>
        </button>
        <button class="flex items-center gap-1.5 text-sm text-gray-500 hover:text-blue-600 transition-colors">
          <svg class="w-4 h-4" 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>45</span>
        </button>
      </div>
      <button class="text-sm font-medium text-blue-600 hover:text-blue-700 transition-colors">
        Read More →
      </button>
    </div>
  </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
38
39

# Blog Card

Editorial blog card with featured image, category tag, author info, and engagement affordances.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Featured image
- Category badge
- Author metadata
- Optional engagement actions

## Usage

```bash
npx devsnips add Tailwind/Components/Cards/blog-card
```

Copy from `code.html`.

## Customization

- Image aspect, typography, badge colors, spacing

## Accessibility

- Meaningful `alt` text for images
- Real links/buttons for actions

## Dependencies

- Tailwind CSS only

## File Structure

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