Componente de lista de deseos
Un componente de lista de deseos de estilo brutalista para sitios web comerciales, con un esquema de color en escala de grises y una complejidad moderada. Diseño responsivo con soporte para modo oscuro usando clases CSS de Tailwind.
Código HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<h2 class="text-2xl font-bold mb-4 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Wishlist</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item1/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 1</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$99.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
</div>
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item2/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 2</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$149.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">Out of Stock</div>
</div>
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item3/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 3</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$79.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
</div>
</div>
</div>Componentes relacionados
Componente de lista de deseos
Componente de lista de deseos responsivo con soporte para modo oscuro usando Tailwind CSS. Mostrar una lista de artículos con imágenes, títulos, precios y botones de eliminación. Diseñado para un salpicadero con colores vibrantes.
Componente de lista de deseos
Un componente de lista de deseos responsivo con estilo de diseño Glassmorphism usando Tailwind CSS, compatible con el modo oscuro con efectos similares al vidrio esmerilado e imágenes de marcador de posición aleatorias.
Componente de lista de deseos
Un componente de lista de deseos de diseño minimalista / plano con efectos responsivos y soporte para temas oscuros.