Componente de lista de deseos - Material Design
Un componente de lista de deseos inspirado en Material Design con diseño responsivo y soporte para temas oscuros.
Código HTML
<div class='p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-gray-800'>
<div class='text-center space-y-2 sm:text-left'>
<div class='space-y-0.5'>
<p class='text-lg text-black font-semibold dark:text-white'>
Product Name
</p>
<p class='text-gray-500 font-medium dark:text-gray-300'>
$19.99
</p>
</div>
<button class='px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800'>
Remove
</button>
</div>
<img class='block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0' src='https://picsum.photos/200' alt='Product Image'>
</div>Componentes relacionados
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.
RetroWishlistComponent
Un componente de lista de deseos simple y receptivo con una estética retro / vintage, combinación de colores otoñal y compatibilidad con modo oscuro, adecuado para sitios de documentación o base de conocimientos.
Wishlist_Component
Un componente de lista de deseos complejo, de color triádico, corporativo/profesional, adecuado para un tablero, con diseño receptivo y soporte para modo oscuro.