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 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.
Composant de la liste de souhaits
Un composant de liste de souhaits simple, de style brutaliste, pour un portfolio, avec une palette de couleurs analogue à contraste élevé. Réactivité avec prise en charge du mode sombre à l’aide de Tailwind CSS.
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.