Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu pour un tableau de bord, avec une palette de couleurs monochromatiques et un style de conception 3D.
HTML Code
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
<ul class="w-full">
<li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
<div class="flex items-center">
<img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of item 1.</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
</li>
<li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
<div class="flex items-center">
<img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of item 2.</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
</li>
<li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
<div class="flex items-center">
<img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of item 3.</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
</li>
</ul>
</div>Composants associés
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
Composant de la liste de souhaits
Composant de liste de souhaits avec conception 3D, schéma de couleurs analogue et complexité simple à des fins de tableau de bord, avec conception réactive et prise en charge du thème sombre.
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.