Composant rétro de commerce électronique
Un composant de commerce électronique complexe conçu avec un style rétro/vintage, avec une palette de couleurs triadique et un design réactif, adapté aux sites Web d’entreprise/d’entreprise avec prise en charge du mode sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<div class="mb-4">
<h2 class="text-3xl font-bold text-center text-red-600 dark:text-red-400">Vintage E-commerce Store</h2>
<p class="text-center text-lg text-gray-700 dark:text-gray-300">Explore our curated collection of retro-inspired products</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Retro Gadget</h3>
<p class="text-gray-600 dark:text-gray-400">Classic retro gadget from the 90s, perfect for nostalgia lovers!</p>
<span class="block text-lg font-bold text-red-600 dark:text-red-400">$29.99</span>
<button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Vintage Vinyl</h3>
<p class="text-gray-600 dark:text-gray-400">Experience music like it's the 80s with our vintage vinyl collection.</p>
<span class="block text-lg font-bold text-red-600 dark:text-red-400">$19.99</span>
<button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Classic Arcade Game</h3>
<p class="text-gray-600 dark:text-gray-400">Relive the golden age of gaming with our classic arcade machines!</p>
<span class="block text-lg font-bold text-red-600 dark:text-red-400">$99.99</span>
<button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
</div>
</div>
</div>
<div class="mt-8">
<h2 class="text-2xl font-bold text-center text-red-600 dark:text-red-400">Meet Our Team</h2>
<div class="flex flex-wrap justify-center space-x-4 mt-4">
<div class="flex flex-col items-center">
<img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member 1">
<h4 class="mt-2 text-gray-800 dark:text-gray-200">John Doe</h4>
</div>
<div class="flex flex-col items-center">
<img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member 2">
<h4 class="mt-2 text-gray-800 dark:text-gray-200">Jane Smith</h4>
</div>
<div class="flex flex-col items-center">
<img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Team Member 3">
<h4 class="mt-2 text-gray-800 dark:text-gray-200">Bob Johnson</h4>
</div>
</div>
</div>
</div>Composants associés
grille-de-produits-monochrome-retro-monochrome
Un composant de grille de produits de commerce électronique rétro/vintage simple et réactif stylisé dans une palette violette monochromatique avec prise en charge du thème sombre. Le design évoque la nostalgie des années 80/90 avec une mise en page basique et des éléments minimaux, parfaits pour les expériences d’achat en ligne.
Composant Composants de commerce électronique
Un composant de commerce électronique réactif avec des micro-interactions, une palette de couleurs terre, une complexité modérée et une prise en charge du mode sombre.
Composante e-commerce
Un composant de commerce électronique réactif stylisé avec des couleurs Glassmorphism et pastel, adapté aux interfaces de médias sociaux, avec prise en charge du thème sombre.