Components Wishlist Wishlist Component

Wishlist Component

A responsive wishlist component designed in dark mode using Tailwind CSS. It features a card layout for items with images, descriptions, and user avatars, supporting dark theme and responsive effects.

Preview

HTML Code

<div class="min-h-screen bg-gray-900 flex items-center justify-center">
    <div class="w-full max-w-2xl p-6 bg-gray-800 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold text-white mb-4">My Wishlist</h2>
        <div class="space-y-4">
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 1</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 2</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 3</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Related Components

Wishlist Component

A responsive Wishlist component designed with a retro/vintage aesthetic, featuring triadic color scheme and dark mode support, ideal for showcasing work or products.

Open

Wishlist Component

A simple, responsive wishlist component for business/corporate websites with microinteractions. Features an analogous color scheme (blue-green-teal), dark theme support, and subtle hover animations. The component displays wishlist items with product images, names, prices, and action buttons.

Open

Wishlist Component

A responsive Wishlist Component designed for dark mode, suited for business/corporate websites. It features interactive elements and a complementary color scheme, built using Tailwind CSS.

Open