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.
HTML Code
<div class="min-h-screen bg-pastel-100 dark:bg-pastel-900">
<!-- Navigation Bar -->
<nav class="bg-pastel-200 dark:bg-pastel-800 shadow">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="text-pastel-900 dark:text-pastel-100 font-semibold text-xl">My E-commerce</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Home</a>
<a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Shop</a>
<a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Cart</a>
</div>
</div>
</div>
</nav>
<!-- Main Content Area -->
<main class="container mx-auto mt-6 px-6 py-3">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card (Repeat this block for multiple products) -->
<div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/300/200" alt="Product Image">
<div class="p-4">
<h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Product Name</h3>
<p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of the product.</p>
<div class="flex items-center justify-between">
<span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$19.99</span>
<button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- End Product Card -->
<!-- Example of another product card -->
<div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/300/200" alt="Product Image">
<div class="p-4">
<h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Another Product</h3>
<p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of another product.</p>
<div class="flex items-center justify-between">
<span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$25.00</span>
<button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-pastel-200 dark:bg-pastel-800 mt-6 py-6">
<div class="container mx-auto text-center text-pastel-900 dark:text-pastel-100">
<p>© 2023 My E-commerce. All rights reserved.</p>
</div>
</footer>
</div>Composants associés
Composant de mise en page 3D
Une mise en page de conception 3D simple, réactive et attrayante pour les sites Web d’entreprise/d’entreprise utilisant des couleurs vives, avec prise en charge du thème sombre.
Composants de mise en page Composant 40
Un composant de mise en page réactif avec des micro-interactions avec des animations attrayantes. Il comprend une structure de carte avec des interactions utilisateur telles que des effets de survol, une mise à l’échelle et des ajustements de thème sombre.
Composant de mise en page en mode sombre
Un composant de mise en page réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Comprend un en-tête, une zone de contenu et un pied de page simples. Le mode sombre est géré par le préfixe 'dark :' dans les classes Tailwind.