Fiche produit e-commerce rétro
Une fiche produit e-commerce rétro/vintage avec un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="max-w-sm rounded overflow-hidden shadow-lg m-4 bg-white dark:bg-gray-800">
<img class="w-full" src="https://picsum.photos/seed/retro1/400/300" alt="Retro product image">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 text-gray-900 dark:text-white">Retro Collectible</div>
<p class="text-gray-700 dark:text-gray-300 text-base">
A truly unique retro item that brings back memories of a bygone era. Perfect for collectors and enthusiasts.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">#retro</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mr-2 mb-2">#vintage</span>
<span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">#collectible</span>
</div>
<div class="px-6 py-4 flex items-center justify-between">
<span class="font-bold text-xl text-gray-900 dark:text-white">$19.99</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-700 dark:hover:bg-blue-600">
Add to Cart
</button>
</div>
</div>Composants associés
Composant de tableau de bord e-commerce
Composant de tableau de bord de commerce électronique avec skeuomorphisme, couleurs vives et mise en page simple pour Tailwind CSS, avec prise en charge du thème réactif et sombre.
Composant Composants de commerce électronique
Un composant e-commerce brutaliste pour un blog, caractérisé par une palette de couleurs vives et une complexité modérée. Il comprend un design réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composants du commerce électronique
Un composant de commerce électronique de complexité modérée avec un design en mode sombre utilisant des couleurs de terre pour une présentation de portefeuille.