Componente de comercio electrónico
Un componente de comercio electrónico receptivo con estilo Glassmorphism y colores pastel, adecuado para interfaces de redes sociales, con soporte para temas oscuros.
Código HTML
<div class="flex flex-col items-center justify-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-3">Featured Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<img src="https://picsum.photos/200/300" alt="Product 1" class="mb-3 rounded-md shadow-sm">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1 goes here.</p>
<span class="font-bold text-xl text-gray-800 dark:text-gray-200">$19.99</span>
<button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<img src="https://picsum.photos/200/301" alt="Product 2" class="mb-3 rounded-md shadow-sm">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2 goes here.</p>
<span class="font-bold text-xl text-gray-800 dark:text-gray-200">$29.99</span>
<button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<img src="https://picsum.photos/200/302" alt="Product 3" class="mb-3 rounded-md shadow-sm">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3 goes here.</p>
<span class="font-bold text-xl text-gray-800 dark:text-gray-200">$39.99</span>
<button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
</div>
</div>
<div class="mt-5 flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-2">
<div class="text-left">
<p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Great product! Highly recommend.</p>
</div>
</div>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-2">
<div class="text-left">
<p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Loved it! Will buy again.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Industrial_Monochrome_Blog_Card
Una tarjeta de consumo de blog/contenido compleja y responsiva con una estética industrial, que utiliza un esquema de color blanco y negro con un solo acento brillante. Cuenta con elementos expuestos y diseño utilitario, con soporte para modo oscuro.
Componente de componentes de comercio electrónico
Un componente de comercio electrónico receptivo diseñado para el modo oscuro con una combinación de colores triádica, con listados de productos, un icono de carrito de compras y un avatar de usuario.
Forum_Community_Component
Un componente de foro/debate comunitario temático y receptivo con un estilo de diseño corporativo/profesional y una combinación de colores océano/azul, incluida la compatibilidad con el modo oscuro.