Wishlist Component
A simple, brutalist-style Wishlist Component for a portfolio, featuring a high-contrast, analogous color scheme. Responsive with dark mode support using Tailwind CSS.
HTML Code
<div class="dark:bg-gray-900 dark:text-gray-100 bg-gray-100 text-gray-900 min-h-screen flex items-center justify-center">
<div class="container mx-auto p-4">
<div class="border-4 border-black dark:border-white p-6">
<h2 class="text-2xl font-bold mb-4 dark:text-white text-black">Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
<div class="flex items-center">
<img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
<div>
<h3 class="font-bold dark:text-white text-black">Product Name 1</h3>
<p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
</div>
</div>
<button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
</div>
<div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
<div class="flex items-center">
<img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
<div>
<h3 class="font-bold dark:text-white text-black">Product Name 2</h3>
<p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
</div>
</div>
<button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
</div>
</div>
</div>
</div>
</div>Related Components
Wishlist Real Estate Component
A responsive and high-contrast wishlist component for real estate properties, inspired by Material Design principles, with dark mode support.
Wishlist Component
Retro/Vintage Wishlist Component for E-commerce with Triadic color scheme, simple complexity, responsive design, and dark theme support.
Wishlist Component
A minimalist and responsive wishlist component with a multi-color gradient rainbow theme, suitable for news or journalism websites. Includes dark mode support and interactive elements.