Componente de la galería de productos
Una galería de productos receptiva con una estética retro/vintage, con soporte para el modo oscuro. Incluye imágenes y avatares generados a partir de servicios de marcadores de posición.
Código HTML
<div class="max-w-7xl mx-auto p-8">
<h2 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Retro Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</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-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</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-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</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-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de la galería de productos
Componente de galería de productos Glassmorphism con efectos responsivos y soporte para temas oscuros.
Componente de la galería de productos
Componente de galería de productos responsivo con modo oscuro
Componente de la galería de productos
Un componente de galería de productos responsivo simple diseñado con los principios de Material Design, con colores vibrantes y soporte para modo oscuro, adecuado para un tablero. Este componente utiliza Tailwind CSS para el estilo.