Course 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
52
53
54

<div class="group bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all overflow-hidden">
  <div class="relative">
    <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=600&h=300&fit=crop" alt="Course" class="w-full h-36 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-3 left-4 right-4">
      <span class="px-2.5 py-1 bg-blue-600 text-white text-xs font-semibold rounded-full">BESTSELLER</span>
    </div>
    <div class="absolute top-3 right-3">
      <span class="px-2.5 py-1 bg-white/90 backdrop-blur text-gray-900 text-xs font-semibold rounded-full">4.5h left</span>
    </div>
  </div>
  
  <div class="p-5">
    <div class="flex items-center gap-3 mb-3">
      <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=64&h=64&fit=crop&crop=faces" alt="Instructor" class="w-8 h-8 rounded-full object-cover">
      <div>
        <p class="text-sm font-medium text-gray-900">David Chen</p>
        <p class="text-xs text-gray-500">Expert Instructor</p>
      </div>
    </div>
    
    <h3 class="font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors line-clamp-2">Complete Python Developer: Zero to Mastery</h3>
    
    <div class="flex items-center gap-4 text-sm mb-4">
      <div class="flex items-center gap-1">
        <svg class="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
        <span class="font-medium">4.8</span>
        <span class="text-gray-400">(12.4k)</span>
      </div>
      <div class="flex items-center gap-1 text-gray-500">
        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span>42 hours</span>
      </div>
      <div class="flex items-center gap-1 text-gray-500">
        <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
        <span>84.2k</span>
      </div>
    </div>
    
    <div class="flex items-center justify-between pt-4 border-t border-gray-100">
      <div class="flex items-center gap-2">
        <span class="text-xl font-bold text-gray-900">$89.99</span>
        <span class="text-sm text-gray-400 line-through">$199.99</span>
      </div>
      <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
        Enroll Now
      </button>
    </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
37

# Course Card

Course / learning content card (title, instructor, meta).

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Course media + title
- Instructor / meta row
- Optional progress or CTA

## Usage

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

Copy from `code.html`.

## Customization

- Image aspect, badge colors, spacing

## Accessibility

- Meaningful image `alt`; real controls for CTAs

## Dependencies

- Tailwind CSS only

## File Structure

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