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.
HTML Code
<!-- Retro Monochromatic E-Commerce Product Grid -->
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
<img src="https://picsum.photos/seed/p1/300/200" alt="Retro T-Shirt" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
<h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Retro T-Shirt</h2>
<p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$29.99</p>
<button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
<span class="text-sm text-violet-900 dark:text-violet-100">VintageCo</span>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
<img src="https://picsum.photos/seed/p2/300/200" alt="Vintage Camera" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
<h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Vintage Camera</h2>
<p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$149.00</p>
<button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
<span class="text-sm text-violet-900 dark:text-violet-100">90sShop</span>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
<img src="https://picsum.photos/seed/p3/300/200" alt="Cassette Player" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
<h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Cassette Player</h2>
<p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$49.50</p>
<button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/lego/3.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
<span class="text-sm text-violet-900 dark:text-violet-100">RetroWave</span>
</div>
</div>
</div>
</div>Composants associés
Composant Neumorphisme E-commerce
Un composant de commerce électronique réactif conçu dans le style Neumorphism avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Composants de commerce électronique
Composant de commerce électronique pour un site Web d’entreprise minimaliste, avec un design réactif et une prise en charge du thème sombre.
Composants du commerce électronique
Un composant de commerce électronique de style brutaliste avec un design audacieux, un contraste élevé et une mise en page réactive avec prise en charge du mode sombre.