Componentes Lista de deseos Componente de lista de deseos

Componente de lista de deseos

Un componente de lista de deseos de estilo 3D para interfaces de redes sociales, con elementos interactivos y compatibilidad con el modo oscuro.

Vista previa

Código HTML

<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>

Componentes relacionados

Componente de lista de deseos

Un componente de lista de deseos responsivo diseñado con elementos 3D, tonos tierra y compatibilidad con el modo oscuro para mostrar trabajos o productos.

Abrir

RetroWishlistComponent

Un componente de lista de deseos simple y receptivo con una estética retro / vintage, combinación de colores otoñal y compatibilidad con modo oscuro, adecuado para sitios de documentación o base de conocimientos.

Abrir

Componente de lista de deseos

Un componente de lista de deseos al estilo Neumorphism para redes sociales, con una combinación de colores complementaria. Incluye un diseño responsivo que utiliza Tailwind CSS con soporte para modo oscuro. Solo se utilizan las clases HTML y Tailwind, sin JavaScript. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.

Abrir