Wishlist Component
A responsive Wishlist component designed for a dashboard, featuring a monochromatic color scheme and a 3D design style.
HTML Code
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
<ul class="w-full">
<li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
<div class="flex items-center">
<img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of item 1.</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
</li>
<li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
<div class="flex items-center">
<img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of item 2.</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
</li>
<li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
<div class="flex items-center">
<img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of item 3.</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
</li>
</ul>
</div>Related Components
RetroWishlistComponent
A simple, responsive wishlist component with a retro/vintage aesthetic, autumn color scheme, and dark mode support, suitable for documentation or knowledge base sites.
Wishlist Component
Complex Skeuomorphism Wishlist Component with Complementary color scheme, for Social Media purposes. Responsive, with Dark Theme support.
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.