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