Composant de mise en page de grille
Un composant de mise en page de grille minimaliste pour le commerce électronique avec une palette de couleurs triadique et la prise en charge du mode sombre, conçu pour les expériences d’achat en ligne.
HTML Code
<div class="container mx-auto px-4">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Shop Our Collection</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$39.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$59.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$69.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$79.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
<span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$89.99</span>
<button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>Composants associés
Monospace_Developer_Food_Grid_Layout
Un composant de mise en page de grille simple, sur le thème du monospace, pour les sites Web de restauration, avec un design épuré et une palette de couleurs monochromes avec prise en charge du mode sombre.
Composant de disposition de grille Glassmorphism
Composant de mise en page de grille Glassmorphism avec prise en charge du thème réactif et sombre
Composant 7 de la disposition de la grille
Un composant de mise en page de grille réactif conçu dans le style Brutalism avec Tailwind CSS, avec la prise en charge des thèmes sombres et des images de remplacement aléatoires.