Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu avec des éléments 3D, des tons de terre et la prise en charge du mode sombre pour présenter des travaux ou des produits.
HTML Code
<div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
<ul class="space-y-4">
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">
<img src="https://picsum.photos/100/100?random=1" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">
<div class="flex-grow">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of product 1.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>
</li>
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">
<img src="https://picsum.photos/100/100?random=2" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">
<div class="flex-grow">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of product 2.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>
</li>
<li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">
<img src="https://picsum.photos/100/100?random=3" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">
<div class="flex-grow">
<h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Brief description of product 3.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>
</li>
</ul>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Profile</h3>
<div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="font-medium text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits de style 3D pour les interfaces de médias sociaux, avec des éléments interactifs et la prise en charge du mode sombre.
Wishlist_Component
Un composant de liste de souhaits réactif et artistique pour les applications de sport/fitness, doté d’une palette de couleurs vert forêt, avec des textures douces et peintes et une prise en charge du mode sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif pour les applications de sport/fitness, avec des micro-interactions, une palette de couleurs à contraste élevé et la prise en charge du mode sombre. Les utilisateurs peuvent ajouter/supprimer des éléments et voir un retour visuel.