Componente Columnas
Un componente de columnas responsivo con pequeñas animaciones atractivas, adecuado para el comercio electrónico con un tema oscuro.
Código HTML
<div class="container mx-auto">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<span class="font-semibold text-gray-800 dark:text-white">Product 1</span>
</div>
<p class="text-gray-600 dark:text-gray-300">$29.99</p>
</div>
</div>
<div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/301?random=1" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<span class="font-semibold text-gray-800 dark:text-white">Product 2</span>
</div>
<p class="text-gray-600 dark:text-gray-300">$39.99</p>
</div>
</div>
<div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/302?random=1" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<span class="font-semibold text-gray-800 dark:text-white">Product 3</span>
</div>
<p class="text-gray-600 dark:text-gray-300">$49.99</p>
</div>
</div>
</div>
</div>
Componentes relacionados
Luxury_Dating_Columns_Component
Un componente de diseño simple y elegante de tres columnas para plataformas de citas/redes sociales, con una estética de lujo con una paleta de colores negro, blanco y acento, capacidad de respuesta total y compatibilidad con modo oscuro.
Neumorfismo de los componentes de las columnas
Nemorfismo de los componentes de las columnas: un estilo de interfaz de usuario suave que crea elementos que parecen sobresalir del fondo mediante sombras sutiles. Este componente es responsivo y tiene soporte para temas oscuros. No se necesita código JavaScript. Para el modo oscuro, la compatibilidad con CSS es suficiente.