Componente de la galería de productos
Un componente de galería de productos receptivo diseñado para la interfaz de usuario del modo oscuro, con colores complementarios, adecuado para interfaces de redes sociales.
Código HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-bold mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Item -->
<div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
<div class="mt-2">
<h3 class="text-lg font-semibold">Product 1</h3>
<p class="text-gray-300">Description of product 1 in this gallery.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-400">by John Doe</span>
</div>
</div>
</div>
<!-- Product Item -->
<div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
<div class="mt-2">
<h3 class="text-lg font-semibold">Product 2</h3>
<p class="text-gray-300">Description of product 2 in this gallery.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-400">by Jane Doe</span>
</div>
</div>
</div>
<!-- Product Item -->
<div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
<div class="mt-2">
<h3 class="text-lg font-semibold">Product 3</h3>
<p class="text-gray-300">Description of product 3 in this gallery.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-400">by Alex Smith</span>
</div>
</div>
</div>
<!-- Additional Product Items can go here -->
</div>
</div>Componentes relacionados
Componente de la galería de productos
Un componente simple de la galería de productos diseñado con elementos 3D para la profundidad, utilizando un esquema de color triádico. Es responsivo y admite temas oscuros, adecuados para mostrar trabajos o productos.
Componente de la galería de productos
Un componente de galería de productos responsivo con una estética de Material Design, con un diseño basado en cuadrículas y elementos interactivos adecuados para exhibir productos o un portafolio. Incluye soporte para el modo oscuro y utiliza un esquema de color análogo.
Componente de la galería de productos - Diseño de materiales
Un componente de la galería de productos inspirado en Material Design con diseño responsivo, efectos de desplazamiento y compatibilidad con temas oscuros. Utiliza Tailwind CSS.