Composant Cartes de produits
Un composant de carte produit réactif avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du thème sombre, adapté à un tableau de bord. La conception comprend des espaces réservés pour les images et les détails du produit.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
<h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8">
Retro Product Dashboard
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=1" alt="Product Image">
<div class="p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Synthwave Mixer</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A classic piece of audio equipment, perfect for capturing that 80s vibe.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$299.99</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=2" alt="Product Image">
<div class="p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Neon Arcade Joystick</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the glory days of arcade gaming with this vibrant joystick.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$49.99</span>
<button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=3" alt="Product Image">
<div class="p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Classic Cassette Player</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Enjoy your favorite mixtapes with this retro-inspired portable player.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-700 transform transition duration-500 hover:scale-105">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=4" alt="Product Image">
<div class="p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vintage Gaming Console</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blast from the past, featuring iconic games and a nostalgic design.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$149.99</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-indigo-500 dark:border-indigo-700 transform transition duration-500 hover:scale-105">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=5" alt="Product Image">
<div class="p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Retro Boombox Speaker</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Powerful sound with a retro aesthetic, perfect for any party.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">$129.99</span>
<button class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-blue-500 dark:border-blue-700 transform transition duration-500 hover:scale-105">
<img class="w-full h-48 object-cover object-center" src="https://picsum.photos/400/300?random=6" alt="Product Image">
<div class="p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Pixel Art Smartwatch</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">A blend of modern tech and retro pixel art design.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300">View Details</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Cartes Produits Neumorphic - Palette Rétro
Il s’agit d’un composant complexe et réactif conçu avec un style d’interface utilisateur Neumorphic doux, utilisant une palette de couleurs rétro/vintage discrète. Les fonctionnalités incluent la prise en charge du mode sombre, des ombres subtiles pour l’effet d’extrusion et du HTML sémantique pour l’accessibilité. Convient pour la lecture et la consommation de contenu, comme un blog ou l’affichage de contenu.
Composant Cartes de produits
Un composant simple de carte produit e-commerce conçu dans le style Material Design à l’aide d’une palette de couleurs en niveaux de gris et d’un design réactif avec prise en charge du thème sombre.
Composant Cartes de produit
Un composant de carte produit réactif conçu dans un style minimaliste avec une palette de couleurs pastel, adapté aux sites Web d’entreprise ou d’entreprise, et inclut la prise en charge du mode sombre.