Wishlist Component
A simplistic wishlist component styled with a Brutalist approach, using a grayscale color scheme, designed for showcasing work or products.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4">Wishlist</h2>
<ul class="space-y-4">
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 1.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 2.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
<li class="border-b border-gray-300 dark:border-gray-700 pb-4">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
<div class="flex-1">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for product 3.</p>
</div>
<button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
</div>
</li>
</ul>
</div>Related Components
Wishlist Component
A simple and responsive wishlist component suitable for dating or social connection platforms, featuring a 3D design aesthetic with corporate blue tones and dark mode support.
Wishlist Component
A Wishlist Component with 3D design style, pastel color scheme, and responsive design for business websites, supporting dark mode.
Wishlist Component
Wishlist Component with 3D Design, Analogous color scheme, and Simple complexity for Dashboard purpose, with responsive design and dark theme support.