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
HTML Code
<div class="bg-gray-900 text-gray-200 dark:bg-gray-800 dark:text-gray-100 min-h-screen p-8">
<div class="max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-6 text-gray-100 dark:text-gray-50">My Wishlist</h2>
<!-- Wishlist Item 1 -->
<div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center">
<img src="https://picsum.photos/id/1018/60/60" alt="Product Image" class="rounded-md mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 1</h3>
<p class="text-gray-400 dark:text-gray-300">$19.99</p>
</div>
</div>
<button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Wishlist Item 2 -->
<div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center">
<img src="https://picsum.photos/id/1015/60/60" alt="Product Image" class="rounded-md mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 2</h3>
<p class="text-gray-400 dark:text-gray-300">$29.50</p>
</div>
</div>
<button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Wishlist Item 3 -->
<div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center">
<img src="https://picsum.photos/id/1016/60/60" alt="Product Image" class="rounded-md mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 3</h3>
<p class="text-gray-400 dark:text-gray-300">$9.00</p>
</div>
</div>
<button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs en niveaux de gris et une complexité modérée. Conception réactive avec prise en charge du mode sombre à l’aide des classes CSS Tailwind.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif avec le style de conception Glassmorphism utilisant Tailwind CSS, prenant en charge le mode sombre avec des effets de verre dépoli et des images de remplacement aléatoires.
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.