devsnips
Search docs, APIs, guides…

Component

NFT Card

Dark-themed NFT marketplace card with art preview, bidding info, countdown, and creator attribution.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Art preview
  • Bid info
  • Countdown
  • Creator badge

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/cards/nft-card/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Cards/nft-card
registry path: Tailwind/Components/Cards/nft-card

Source

Implementation

code.html 
<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>
51 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/cards/nft-card
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/cards/nft-card/

Install: npx devsnips add
Tailwind/Components/Cards/nft-card

This is the NFT Card — Dark-themed NFT marketplace card with art preview, bidding info, countdown, and creator attribution.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/cards/nft-card