Componente de lista de deseos
Un componente de lista de deseos responsivo diseñado para un tablero, con un esquema de color monocromático y un estilo de diseño 3D.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
<ul class="w-full">
<li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
<div class="flex items-center">
<img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of item 1.</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
</li>
<li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
<div class="flex items-center">
<img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of item 2.</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
</li>
<li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
<div class="flex items-center">
<img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of item 3.</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
</li>
</ul>
</div>Componentes relacionados
Componente de lista de deseos
Un componente minimalista de la lista de deseos con imágenes de marcador de posición y un tema oscuro.
Componente de lista de deseos
Un componente de lista de deseos simple y receptivo con una estética monoespaciada/reveladora diseñada para aplicaciones deportivas/fitness. Presenta blanco y negro con un color de énfasis, compatibilidad con modo oscuro y utiliza HTML semántico.
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.