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 simple et réactif pour les sites Web d’entreprise/d’entreprise avec des micro-interactions. Dispose d’un schéma de couleurs analogue (bleu-vert-sarcelle), d’une prise en charge du thème sombre et de subtiles animations de survol. Le composant affiche les éléments de la liste de souhaits avec des images de produits, des noms, des prix et des boutons d’action.
Wishlist Composante immobilière
Un composant de liste de souhaits réactif et à contraste élevé pour les propriétés immobilières, inspiré des principes de conception matérielle, avec prise en charge du mode sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits propre et fiable conçu pour les organisations à but non lucratif/caritatives, doté d’une palette de couleurs triadique et d’une réactivité totale avec prise en charge du mode sombre.