Wishlist Component
A minimalist/flat design wishlist component with responsive effects and dark theme support.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">My Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1018/100/100" alt="Product image">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex items-center">
<img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1015/100/100" alt="Product image">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>Related Components
Wishlist Component
A simplistic wishlist component styled with a Brutalist approach, using a grayscale color scheme, designed for showcasing work or products.
Wishlist Component - Material Design
A Material Design inspired Wishlist Component with responsive design and dark theme support.