Composant de mise en page du commerce électronique
Un composant de mise en page e-commerce simple et réactif avec une esthétique Material Design en niveaux de gris, avec une grille de produits, un en-tête et un pied de page, le tout avec prise en charge du mode sombre. Utilise picsum.photos pour les images de produits.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">E-Commerce Store</h1>
<nav class="hidden md:block">
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Products</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</nav>
<div class="md:hidden">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8 flex-grow">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">$49.99</p>
<button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">$29.99</p>
<button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">$79.99</p>
<button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 4</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">$19.99</p>
<button class="mt-4 bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600">Add to Cart</button>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white dark:bg-gray-800 shadow mt-8">
<div class="container mx-auto px-4 py-4 text-center text-gray-600 dark:text-gray-300">
© 2023 E-Commerce Store. All rights reserved.
</div>
</footer>
</div>Composants associés
Composant Composants de mise en page
Une mise en page de composant Web réactive suivant les principes de conception matérielle pour une application de médias sociaux avec prise en charge du thème sombre.
Composant de mise en page 3D
Un composant de mise en page de médias sociaux réactif 3D Design avec une palette de couleurs en niveaux de gris. Convient aux interfaces de réseaux sociaux.
Composant de mise en page du commerce électronique
Un composant de mise en page e-commerce réactif avec prise en charge du thème sombre, construit avec Tailwind CSS selon les principes de Material Design. Il comprend une barre de navigation, une zone de contenu principale avec des listes de produits et un pied de page. La palette de couleurs est pastel.