Composant de conteneur
Composant de conteneur réactif avec prise en charge du mode sombre pour le commerce électronique
HTML Code
<div class="container mx-auto p-4 bg-gray-900 text-gray-100">
<div class="dark:bg-gray-800 rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4 dark:text-gray-200">Product Listing</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 1</h3>
<p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-green-500">$19.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 2</h3>
<p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-green-500">$29.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 3</h3>
<p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-green-500">$39.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant du conteneur 30
Un composant de conteneur de conception 3D réactif qui intègre des éléments tridimensionnels pour plus de profondeur et d’engagement avec la prise en charge du thème sombre.
Composant de conteneur
Un conteneur réactif en mode sombre pour le contenu de blog avec un design simple en niveaux de gris.
Composant de conteneur
Un composant de conteneur conçu dans un style brutaliste pour le commerce électronique, avec une mise en page réactive avec prise en charge du thème sombre, utilisant Tailwind CSS.