Componente de lista de deseos
Un componente de lista de deseos simple y de estilo brutalista para un portafolio, con un esquema de color análogo de alto contraste. Responsivo con soporte de modo oscuro usando Tailwind CSS.
Código HTML
<div class="dark:bg-gray-900 dark:text-gray-100 bg-gray-100 text-gray-900 min-h-screen flex items-center justify-center">
<div class="container mx-auto p-4">
<div class="border-4 border-black dark:border-white p-6">
<h2 class="text-2xl font-bold mb-4 dark:text-white text-black">Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
<div class="flex items-center">
<img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
<div>
<h3 class="font-bold dark:text-white text-black">Product Name 1</h3>
<p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
</div>
</div>
<button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
</div>
<div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
<div class="flex items-center">
<img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
<div>
<h3 class="font-bold dark:text-white text-black">Product Name 2</h3>
<p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
</div>
</div>
<button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente de lista de deseos
Un componente simplista de la lista de deseos con un enfoque brutalista, utilizando un esquema de color en escala de grises, diseñado para exhibir trabajos o productos.
Componente de lista de deseos
Un componente de lista de deseos responsivo diseñado en modo oscuro usando Tailwind CSS. Cuenta con un diseño de tarjeta para elementos con imágenes, descripciones y avatares de usuario, que admite temas oscuros y efectos responsivos.