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.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4">Wishlist</h2>
<ul class="space-y-4">
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 1.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 2.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 3.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
</ul>
</div>Componentes relacionados
Componente de lista de deseos de Glassmorphism
Un componente de lista de deseos simple y receptivo de estilo glassmorphism para plataformas de música/audio, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y un esquema de color azul corporativo, con soporte para modo oscuro.
Componente de lista de deseos
Un componente de lista de deseos complejo y receptivo con un diseño retro / vintage, combinación de colores en tono tierra y compatibilidad con modo oscuro, adecuado para un blog o sitio de contenido.
Componente de lista de deseos
Un componente de lista de deseos minimalista y receptivo con un tema de arcoíris degradado multicolor, adecuado para sitios web de noticias o periodismo. Incluye soporte para modo oscuro y elementos interactivos.