Componente de componentes interactivos
Componente de componentes interactivos con diseño de materiales, combinación de colores triádica, complejidad compleja, para comercio electrónico, con diseño receptivo y soporte de temas oscuros.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 p-4">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
<button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente interactivo de entrega de alimentos
Un componente complejo e interactivo de entrega de alimentos y restaurante con efectos de brillo de neón, colores vibrantes y múltiples elementos interactivos. Diseñado para la capacidad de respuesta y la compatibilidad con el modo oscuro.
Componente de Portafolio Interactivo
Un componente de cartera responsivo con microinteracciones y un esquema de color pastel, compatible con el modo oscuro con Tailwind CSS.
Componente de componentes interactivos
Un componente interactivo de estilo Neumorphism con efectos responsivos y compatibilidad con temas oscuros.