ArtDeco_ProductCards_Music
Componente de tarjetas de producto simple y receptivo con una estética Art Deco, con patrones geométricos y una combinación de colores cálidos/atardeceres, adecuados para plataformas de música y audio. Incluye soporte para modo oscuro.
Código HTML
<div class="bg-gradient-to-br from-yellow-100 via-orange-200 to-red-200 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-serif flex items-center justify-center">
<div class="container mx-auto px-4 py-8">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-center mb-12 tracking-wider text-yellow-900 dark:text-orange-300 drop-shadow-lg leading-tight">
<span class="block">Curated Sounds</span>
<span class="block text-3xl md:text-4xl lg:text-5xl mt-2">Golden Age Audio</span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iI2ZmZTQ0ZSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iIzQ0NSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
bg-repeat opacity-50"></div>
<div class="relative z-10 flex flex-col items-center">
<img src="https://picsum.photos/id/1047/400/300" alt="Vintage Turntable" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">The Gilded Gramophone</h3>
<p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Experience unparalleled warmth with our meticulously restored vintage turntable. A true centerpiece for any audiophile.</p>
<div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$1,299</div>
<button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
Add to Collection
</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZ1/yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
bg-repeat opacity-50"></div>
<div class="relative z-10 flex flex-col items-center">
<img src="https://picsum.photos/id/1118/400/300" alt="Art Deco Speakers" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Symphony Tower Speakers</h3>
<p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Precision-engineered sound with a sleek Art Deco design. Fill your space with rich, immersive audio.</p>
<div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$849</div>
<button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
Add to Collection
</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
bg-repeat opacity-50"></div>
<div class="relative z-10 flex flex-col items-center">
<img src="https://picsum.photos/id/111/400/300" alt="Wireless Headphones" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Aria Wireless Headphones</h3>
<p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Unleash your music with luxurious comfort and crystal-clear sound, wirelessly.</p>
<div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$229</div>
<button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
Add to Collection
</button>
</div>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente Tarjetas de producto
Componente de tarjeta de producto con estilo brutalista, combinación de colores monocromática, nivel de complejidad complejo para fines de comercio electrónico.
Componente Tarjetas de producto
Un componente simple de tarjeta de producto de comercio electrónico diseñado en estilo Material Design utilizando un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.
Componente Tarjetas de producto
Un componente de tarjeta de producto receptivo con diseño 3D, combinación de colores análoga y compatibilidad con modo oscuro, diseñado para interfaces de redes sociales.