Video 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

<div class="group bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300">
  <div class="relative">
    <img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?w=600&h=340&fit=crop" alt="Video thumbnail" class="w-full aspect-video object-cover">
    <div class="absolute inset-0 bg-black/30 group-hover:bg-black/20 transition-colors flex items-center justify-center">
      <div class="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg">
        <svg class="w-7 h-7 text-gray-900 ml-1" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"/>
        </svg>
      </div>
    </div>
    <div class="absolute bottom-3 right-3 px-2 py-1 bg-black/80 text-white text-xs font-medium rounded">
      12:34
    </div>
    <div class="absolute top-3 right-3">
      <button class="p-2 bg-black/50 hover:bg-black/70 rounded-full text-white 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="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
        </svg>
      </button>
    </div>
  </div>
  
  <div class="p-4">
    <div class="flex items-start gap-3">
      <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64&h=64&fit=crop&crop=faces" alt="Channel" class="w-10 h-10 rounded-full object-cover shrink-0">
      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-gray-900 line-clamp-2 mb-1 group-hover:text-blue-600 transition-colors">Building a Modern Web Application with React and TypeScript</h3>
        <p class="text-sm text-gray-600">Tech Academy</p>
        <div class="flex items-center gap-2 text-xs text-gray-500 mt-1">
          <span>248K views</span>
          <span>•</span>
          <span>3 days ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

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

# Video Card

Video thumbnail card with title and meta.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Thumbnail / play affordance
- Title and meta

## Usage

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

Copy from `code.html`.

## Customization

- Aspect ratio, overlay, typography

## Accessibility

- Meaningful thumbnail alternative; real control for play

## Dependencies

- Tailwind CSS only

## File Structure

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