Retro_E_commerce_Cards_Component
响应式电子商务商品卡组件，具有复古/复古美感、大地色调和深色模式支持，适用于在线购物体验。功能包括产品图片、名称、价格和行动号召按钮。
HTML 代码
<div class="font-sans bg-amber-50 dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-12 px-4 transition-colors duration-300">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 text-stone-900 dark:text-stone-50 drop-shadow-md tracking-wider">
Our Featured Retro Finds
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
<div class="absolute top-0 left-0 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-br-lg shadow-md tracking-wider -rotate-3 transform origin-top-left group-hover:scale-110 transition-transform duration-200 z-10">
SALE!
</div>
<img src="https://picsum.photos/400/300?random=1" alt="Vintage Record Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Vinyl Player '86</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Authentic analogue sound, built to last.</p>
<div class="flex items-baseline justify-between mb-4">
<p class="text-lg font-extrabold text-amber-700 dark:text-amber-300 line-through mr-2">$299.99</p>
<p class="text-2xl font-extrabold text-green-700 dark:text-green-400">$199.99</p>
</div>
<button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
Add to Cart
</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
<img src="https://picsum.photos/400/300?random=2" alt="Retro Game Console" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Pixel Console DX</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Relive 8-bit glory days, re-engineered.</p>
<div class="flex items-baseline justify-between mb-4">
<p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$149.99</p>
</div>
<button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
Add to Cart
</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
<img src="https://picsum.photos/400/300?random=3" alt="Vintage Typewriter" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 filter grayscale group-hover:grayscale-0 transition-all duration-300">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Classic Typewriter B4</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">For the writer who loves the tactile feel.</p>
<div class="flex items-baseline justify-between mb-4">
<p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$249.00</p>
</div>
<button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
Add to Cart
</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
<img src="https://picsum.photos/400/300?random=4" alt="Old School Camera" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">SnapCam 1990</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Capture moments the classic way.</p>
<div class="flex items-baseline justify-between mb-4">
<p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$119.50</p>
</div>
<button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
Add to Cart
</button>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
<div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg shadow-md tracking-wider rotate-3 transform origin-top-right group-hover:scale-110 transition-transform duration-200 z-10">
NEW!
</div>
<img src="https://picsum.photos/400/300?random=5" alt="Portable Cassette Player" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Walkman Classic</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Your favorite tunes on the go.</p>
<div class="flex items-baseline justify-between mb-4">
<p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$89.00</p>
</div>
<button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
Add to Cart
</button>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-stone-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-all duration-300 border-4 border-amber-300 dark:border-amber-600 relative group">
<img src="https://picsum.photos/400/300?random=6" alt="Boombox" class="w-full h-48 object-cover border-b-4 border-amber-300 dark:border-amber-600 transition-all filter grayscale group-hover:grayscale-0 duration-300 ">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50 tracking-wide">Street Blaster '92</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 font-mono">Bring the party wherever you go.</p>
<div class="flex items-baseline justify-between mb-4">
<p class="text-2xl font-extrabold text-amber-700 dark:text-amber-300">$175.00</p>
</div>
<button class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg shadow-md transform hover:-translate-y-1 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-700 uppercase tracking-widest text-lg">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>