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 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.
Wishlist Component
A responsive wishlist component with 3D elements and pastel colors, supporting dark theme. It includes multiple interactive elements suitable for e-commerce. No JavaScript, only HTML and Tailwind CSS.
Wishlist Component
A responsive wishlist component for consulting/services, featuring Material Design principles, a Neon/Electric color scheme, and dark mode support. It displays services with images, titles, descriptions, and a 'Request Quote' button, along with a 'Remove' button for items.