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 complexe et réactif avec un design rétro/vintage, une palette de couleurs de terre et une prise en charge du mode sombre, adapté à un blog ou à un site de contenu.
Glassmorphism_Wishlist_Component
Un composant de liste de souhaits complexe et réactif avec un design Glassmorphism avec des tons océan/bleu, optimisé pour les plateformes de rencontres/sociales. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif adapté aux plateformes de rencontres ou de connexion sociale, doté d’une esthétique de design 3D avec des tons bleus d’entreprise et une prise en charge du mode sombre.