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
3D_Vibrant_Columns_Component
Un composant de colonnes complexe, dynamique et réactif inspiré de la 3D, adapté à la documentation et aux sites wiki, avec prise en charge du mode sombre, des animations subtiles et du HTML sémantique.
Brutalism_Portfolio_Columns_Component
Un composant de portfolio multi-colonnes d’inspiration brutaliste avec des couleurs sourdes, avec une grande typographie, des bordures à contraste élevé et des mises en page asymétriques. Inclut la prise en charge du mode sombre et présente des projets avec des titres, des descriptions et des images.