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.
HTML Code
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
<div class="p-4">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Wishlist Title</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the wishlist item or purpose goes here.</p>
</div>
</div>
</div>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200">Item 1 - Description</p>
<img src="https://picsum.photos/50/50?image=10" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
</div>
</li>
<li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200">Item 2 - Description</p>
<img src="https://picsum.photos/50/50?image=20" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
</div>
</li>
<li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
<div class="flex items-center justify-between">
<p class="text-gray-800 dark:text-gray-200">Item 3 - Description</p>
<img src="https://picsum.photos/50/50?image=30" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md">
</div>
</li>
</ul>
<div class="p-4">
<button class="w-full bg-blue-600 dark:bg-blue-500 text-white rounded-lg py-2 hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors">Share Wishlist</button>
</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.
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.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu en mode sombre à l’aide de Tailwind CSS. Il dispose d’une disposition de carte pour les éléments avec des images, des descriptions et des avatars d’utilisateur, prenant en charge le thème sombre et les effets réactifs.