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 al estilo Neumorphism para redes sociales, con una combinación de colores complementaria. Incluye un diseño responsivo que utiliza Tailwind CSS con soporte para modo oscuro. Solo se utilizan las clases HTML y Tailwind, sin JavaScript. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.
Componente de lista de deseos
Un componente de lista de deseos responsivo diseñado con elementos 3D, tonos tierra y compatibilidad con el modo oscuro para mostrar trabajos o productos.
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.