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
Componente Columnas
Un componente de columnas responsivo diseñado con Glassmorphism, que utiliza un esquema de color triádico para un sitio web empresarial/corporativo. Cuenta con elementos translúcidos similares al vidrio esmerilado, efectos de desenfoque y es adecuado para el modo oscuro.
Componente Columnas
Componente de columnas para un tablero, con un diseño 3D con colores complementarios. Incluye tres columnas responsivas con un diseño simple, compatibilidad con el modo oscuro y utiliza Tailwind CSS para el estilo. No se incluye JavaScript.
Componente Columnas
Un componente de columnas diseñado con el estilo Glassmorphism, colores vibrantes y un diseño simple, adecuado para un tablero.