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 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 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 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.