Composant Colonnes
Un composant de colonnes réactif conçu dans un style brutaliste avec des tons de terre, adapté au commerce électronique, avec une complexité moyenne et une prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 1</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 1. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$19.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 2</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 2. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$29.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 3</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 3. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$39.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 4</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 4. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$49.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 5</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 5. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$59.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
<div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
<img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-t-lg">
<h2 class="text-lg font-bold mt-2">Product Title 6</h2>
<p class="text-gray-800 dark:text-gray-300">Description for product 6. A brief overview of the product features and benefits.</p>
<div class="flex justify-between items-center mt-4">
<span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$69.99</span>
<button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
</div>
</div>
</div>
</div>Composants associés
Composant Colonnes
Composant de colonnes pour un tableau de bord, présentant un design 3D avec des couleurs complémentaires. Il comprend trois colonnes réactives avec une mise en page simple, la prise en charge du mode sombre et utilise Tailwind CSS pour le style. Aucun JavaScript n’est inclus.
Composant Colonnes
Composant de colonnes réactives avec style Glassmorphism, schéma de couleurs triadique, niveau de complexité simple pour les entreprises/entreprises, inclut la prise en charge du mode sombre.
Composant Colonnes
Un composant de colonnes réactives avec de petites animations attrayantes, adapté au e-commerce avec un thème sombre.