Componente de diseño de comercio electrónico
Un componente de diseño de comercio electrónico responsivo con soporte para temas oscuros, construido con Tailwind CSS siguiendo los principios de Material Design. Incluye una barra de navegación, un área de contenido principal con listados de productos y un pie de página. La combinación de colores es pastel.
Código HTML
<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>Componentes relacionados
Retro_Jewel_Tone_Entertainment_Layout
Un componente de diseño de inspiración retro/vintage de complejidad moderada para plataformas de entretenimiento, con ricos tonos joya y capacidad de respuesta total con soporte para modo oscuro.
Neon_Glow_Gaming_Layout
Un componente de diseño de juego complejo y receptivo con efectos de neón/brillo y un esquema de color en escala de grises, compatible con el modo oscuro.
Componente Componentes de diseño
Un componente de diseño inspirado en el brutalismo para el consumo de contenido con una combinación de colores pastel y complejidad moderada, con diseño receptivo y compatibilidad con el modo oscuro.