Composants Liste de souhaits Composant de la liste de souhaits

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.

Aperçu

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 minimaliste / plat avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir

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.

Ouvrir

Composant de la liste de souhaits

Un composant de liste de souhaits complexe et réactif pour les applications SaaS avec des effets néon/lumineux et une palette de couleurs analogue, prenant en charge le mode sombre.

Ouvrir