Product 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

<article class="group bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300">
  <div class="relative overflow-hidden">
    <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&h=400&fit=crop" alt="Premium Wireless Headphones" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-500">
    <div class="absolute top-4 left-4 flex gap-2">
      <span class="px-3 py-1 bg-white/90 backdrop-blur text-xs font-semibold text-gray-900 rounded-full">NEW</span>
      <span class="px-3 py-1 bg-red-500 text-xs font-semibold text-white rounded-full">-20%</span>
    </div>
    <button class="absolute top-4 right-4 p-2.5 bg-white/90 backdrop-blur rounded-full opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all hover:bg-white">
      <svg class="w-5 h-5 text-gray-700" 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>
    </button>
  </div>
  
  <div class="p-5">
    <div class="flex items-center gap-1 mb-2">
      <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="text-sm font-medium text-gray-700">4.9</span>
      <span class="text-sm text-gray-400">(2,847)</span>
    </div>
    
    <h3 class="font-semibold text-gray-900 mb-1 group-hover:text-blue-600 transition-colors">Premium Wireless Headphones</h3>
    <p class="text-sm text-gray-500 mb-3">Active noise cancellation • 40h battery</p>
    
    <div class="flex items-center justify-between">
      <div class="flex items-baseline gap-2">
        <span class="text-xl font-bold text-gray-900">$249</span>
        <span class="text-sm text-gray-400 line-through">$299</span>
      </div>
      <button class="px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors">
        Add to Cart
      </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

# Product Card

Product listing card with image, title, price.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Product image
- Title and price
- Optional rating / CTA

## Usage

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

Copy from `code.html`.

## Customization

- Image aspect, price typography, badge colors

## Accessibility

- Meaningful image `alt`; real controls for actions

## Dependencies

- Tailwind CSS only

## File Structure

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