Componentes Lista de deseos Componente de lista de deseos

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.

Vista previa

Código HTML

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

Componentes relacionados

Componente de lista de deseos

Un componente de lista de deseos simple y de estilo brutalista para un portafolio, con un esquema de color análogo de alto contraste. Responsivo con soporte de modo oscuro usando Tailwind CSS.

Abrir

Componente de lista de deseos

Un componente minimalista de la lista de deseos con imágenes de marcador de posición y un tema oscuro.

Abrir

Componente de lista de deseos

Un componente de lista de deseos responsivo diseñado con elementos skeuomórficos y colores complementarios para un panel de control de tema oscuro.

Abrir