NFT 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

<div class="group bg-gray-900 rounded-2xl overflow-hidden border border-gray-800 hover:border-purple-500/50 transition-all duration-300">
  <div class="relative">
    <img src="https://images.unsplash.com/photo-1646463876221-9b96e85c76e5?w=600&h=600&fit=crop" alt="Cosmic Dreams #2847" class="w-full aspect-square object-cover">
    <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
    
    <div class="absolute top-4 left-4 flex gap-2">
      <span class="px-3 py-1 bg-purple-600/90 backdrop-blur text-white text-xs font-semibold rounded-full">1 of 1</span>
      <span class="px-3 py-1 bg-gray-900/80 backdrop-blur text-white text-xs font-semibold rounded-full">•••</span>
    </div>
    
    <button class="absolute top-4 right-4 p-2.5 bg-gray-900/80 backdrop-blur rounded-full opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all hover:bg-gray-800">
      <svg class="w-5 h-5 text-white" 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 justify-between mb-3">
      <div>
        <h3 class="font-bold text-white text-lg">Cosmic Dreams #2847</h3>
        <p class="text-purple-400 text-sm">Cosmic Collection</p>
      </div>
      <img src="https://images.unsplash.com/photo-1639322537228-f710d846310a?w=64&h=64&fit=crop" alt="Creator" class="w-10 h-10 rounded-full border-2 border-purple-500">
    </div>
    
    <div class="flex items-end justify-between pt-4 border-t border-gray-800">
      <div>
        <p class="text-xs text-gray-500 mb-1">Current Bid</p>
        <div class="flex items-baseline gap-2">
          <span class="text-2xl font-bold text-white">4.2</span>
          <span class="text-purple-400 font-medium">ETH</span>
        </div>
      </div>
      <button class="px-5 py-2.5 bg-gradient-to-r from-purple-600 to-pink-600 text-white text-sm font-semibold rounded-xl hover:opacity-90 transition-opacity">
        Place Bid
      </button>
    </div>
    
    <div class="flex items-center gap-4 mt-4 text-xs text-gray-500">
      <div class="flex items-center gap-1.5">
        <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>5h 23m left</span>
      </div>
      <span>•</span>
      <span>48 bids</span>
    </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

# NFT Card

NFT / collectible card layout.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Media dominant layout
- Price / creator meta

## Usage

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

Copy from `code.html`.

## Customization

- Media aspect, badge colors, typography

## Accessibility

- Meaningful media alternatives

## Dependencies

- Tailwind CSS only

## File Structure

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