Wishlist Component
A brutalist-style Wishlist Component for business websites, featuring a grayscale color scheme and moderate complexity. Responsive design with dark mode support using Tailwind CSS classes.
HTML Code
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<h2 class="text-2xl font-bold mb-4 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Wishlist</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item1/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 1</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$99.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
</div>
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item2/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 2</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$149.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">Out of Stock</div>
</div>
<div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
<img src="https://picsum.photos/seed/item3/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
<h3 class="text-xl font-bold mb-2">Product Title 3</h3>
<p class="mb-2">Short description of the product.</p>
<p class="font-bold mb-4">$79.99</p>
<button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
<div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
</div>
</div>
</div>Related Components
Wishlist Component
Responsive Wishlist Component with Dark Mode support using Tailwind CSS. Displaying a list of items with images, titles, prices,and remove buttons. Designed for a dashboard with vibrant colors.
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 designed in dark mode using Tailwind CSS. It features a card layout for items with images, descriptions, and user avatars, supporting dark theme and responsive effects.