Composant de la liste de souhaits - Material Design
Un composant de liste de souhaits inspiré du design matériel avec un design réactif et une prise en charge du thème sombre.
HTML Code
<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>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits minimaliste / plat avec des effets réactifs et la prise en charge du thème sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu pour le mode sombre, adapté aux sites Web d’entreprise. Il comporte des éléments interactifs et une palette de couleurs complémentaire, construite à l’aide de Tailwind CSS.
Composant de la liste de souhaits
Composant de la liste de souhaits en mode sombre avec un design monochromatique simple pour le tableau de bord