Wishlist Component
A complex, responsive wishlist component with a retro/vintage design, earth tone color scheme, and dark mode support, suitable for a blog or content site.
HTML Code
<div class="font-sans antialiased bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 transition-colors duration-300 p-4 sm:p-6 md:p-8">
<div class="max-w-6xl mx-auto bg-amber-50 rounded-lg shadow-xl overflow-hidden dark:bg-stone-800 border border-stone-300 dark:border-stone-700 relative">
<!-- Retro TV Bezel Effect -->
<div class="absolute inset-0 border-[1.5rem] border-solid border-stone-400 dark:border-stone-950 rounded-lg pointer-events-none z-10 flex items-center justify-center">
<div class="absolute inset-0 border-stone-600 dark:border-stone-700 border-[0.5rem] rounded-lg"></div>
<span class="absolute top-2 left-2 text-sm text-stone-700 dark:text-stone-300 font-mono">VOL</span>
<span class="absolute top-2 right-2 text-sm text-stone-700 dark:text-stone-300 font-mono">CH</span>
<div class="absolute bottom-4 right-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
<div class="absolute bottom-4 left-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
<div class="absolute top-6 right-6 w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
</div>
<div class="relative z-20 p-4 sm:p-6 lg:p-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center text-orange-800 dark:text-orange-400 mb-6 font-serif">Your Wishlist</h2>
<p class="text-center text-sm mb-8 text-stone-700 dark:text-stone-300 font-mono">Saved items for later enjoyment.</p>
<!-- Sort and Filter Controls -->
<div class="flex flex-col sm:flex-row justify-between items-center mb-8 bg-stone-200/50 dark:bg-stone-700/50 rounded-md p-3 sm:p-4 border border-stone-300 dark:border-stone-600">
<div class="w-full sm:w-auto mb-4 sm:mb-0">
<label for="sort-by" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Sort By:</span></label>
<select id="sort-by" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
<option>Date Added (Newest)</option>
<option>Date Added (Oldest)</option>
<option>Price (Low to High)</option>
<option>Price (High to Low)</option>
<option>Alphabetical (A-Z)</option>
</select>
</div>
<div class="w-full sm:w-auto">
<label for="filter-category" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Filter By Category:</span></label>
<select id="filter-category" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
<option>All</option>
<option>Books</option>
<option>Gadgets</option>
<option>Home Decor</option>
<option>Fashion</option>
</select>
</div>
</div>
<!-- Wishlist Items Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
<!-- Wishlist Item 1 -->
<div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Old Camera">
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Vintage Film Camera</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A rare beauty from the 70s, perfect for collectors.</p>
<div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
<span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$299.99</span>
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
</div>
<div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
<button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
Remove
</button>
<button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/104/400/300" alt="Old Typewriter">
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Antique Typewriter</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Functional and beautiful, a piece of literary history.</p>
<div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
<span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$189.00</span>
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
</div>
<div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
<button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
Remove
</button>
<button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Wishlist Item 3 (Out of Stock) -->
<div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col opacity-70">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/338/400/300" alt="Record Player">
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Classic Vinyl Player</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Spin your favorite tunes on this retro-style player.</p>
<div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
<span class="font-bold text-base mr-2 text-gray-700 dark:text-gray-400">$120.50</span>
<span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Out of Stock</span>
</div>
<div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
<button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 cursor-not-allowed">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
Remove
</button>
<button disabled class="px-4 py-2 bg-gray-400 text-white text-sm font-semibold rounded-md shadow-md cursor-not-allowed dark:bg-gray-600">
Out of Stock
</button>
</div>
</div>
</div>
<!-- Wishlist Item 4 -->
<div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/37/400/300" alt="Old Book">
<div class="p-4 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">First Edition Novel</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A must-read classic in pristine condition.</p>
<div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
<span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$45.00</span>
<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
</div>
<div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
<button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
Remove
</button>
<button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Call to Action / Explore More -->
<div class="text-center mt-10">
<p class="text-stone-700 dark:text-stone-300 mb-4 font-mono">Looking for more vintage finds?</p>
<button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Explore Catalog
<svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- User Profile Thumbnail -->
<div class="absolute top-6 left-6 flex items-center bg-brown-600 dark:bg-brown-800 text-amber-50 rounded-full px-4 py-2 shadow-lg hidden md:flex font-mono">
<img class="w-8 h-8 rounded-full mr-2 border-2 border-amber-300 dark:border-amber-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<span class="text-sm">User's List</span>
</div>
</div>
</div>
</div>Related Components
Glassmorphism_Wishlist_Component
A complex, responsive wishlist component featuring a Glassmorphism design with ocean/blue tones, optimized for dating/social platforms. Includes dark mode support and interactive elements.
Wishlist Component
Wishlist Component with 3D Design, Analogous color scheme, and Simple complexity for Dashboard purpose, with responsive design and dark theme support.
Wishlist Component
A Wishlist Component with 3D design style, pastel color scheme, and responsive design for business websites, supporting dark mode.