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
RetroBusinessLayout
Un composant de mise en page à thème rétro/vintage pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et un design simple. Il est réactif et inclut la prise en charge du mode sombre.
Composant Composants de mise en page
Un composant de mise en page de portfolio réactif doté d’une esthétique rétro/vintage, utilisant une palette de couleurs analogue et conçu pour une complexité moyenne avec des fonctionnalités interactives pour présenter des travaux ou des produits.
Composant de mise en page de blog minimaliste
Composant de mise en page de blog minimaliste avec schéma de couleurs monochromatiques pour la consommation de contenu, réactif et avec prise en charge du thème sombre.