Luxury_Tabs_Component
A simple, elegant, and responsive tabs component designed for marketplace use, featuring a luxury/premium aesthetic with a complementary color scheme and dark mode support.
HTML Code
<div class="p-4 dark:bg-gray-900 bg-white min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden">
<div class="flex border-b border-gray-200 dark:border-gray-700 p-2">
<button class="flex-1 px-4 py-3 text-lg font-medium text-purple-700 dark:text-purple-400 border-b-2 border-purple-700 dark:border-purple-400 transition-colors duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none">
<span class="block">New Arrivals</span>
</button>
<button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
<span class="block">Best Sellers</span>
</button>
<button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
<span class="block">On Sale</span>
</button>
</div>
<div class="p-6 md:p-8">
<!-- Tab Content 1: New Arrivals -->
<div class="space-y-6">
<h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Discover Our Latest Collection</h2>
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
Explore hand-picked items from top sellers, meticulously selected for their quality and unique appeal. Elevate your style with our exquisite new arrivals.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
<img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
<div class="text-center md:text-left">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Elegant Leather Bag</h3>
<p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$299.00</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Handcrafted with premium leather.</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
<img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
<div class="text-center md:text-left">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Artisan Silver Necklace</h3>
<p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$149.00</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Unique design, pure sterling silver.</p>
</div>
</div>
</div>
<div class="md:flex items-center justify-between py-4 border-t border-gray-200 dark:border-gray-700 mt-6">
<div class="flex -space-x-2 overflow-hidden mb-4 md:mb-0 justify-center md:justify-start">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Avatar">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Avatar">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Avatar">
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 text-center md:text-right">Trusted by over 10,000 discerning customers.</p>
</div>
</div>
<!-- Tab Content 2: Best Sellers (hidden by default, for demonstration) -->
<!-- Add 'hidden' class to hide, remove to show -->
<!-- <div class="hidden space-y-6">
<h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Our Most Popular Choices</h2>
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
See what everyone else is loving! These items consistently receive top ratings and fly off our shelves. Don't miss out on these customer favorites.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
<img src="https://picsum.photos/seed/best1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
<div class="text-center md:text-left">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Swiss Watch</h3>
<p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$899.00</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Timeless elegance, precise mechanics.</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
<img src="https://picsum.photos/seed/best2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
<div class="text-center md:text-left">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Silk Scarf Collection</h3>
<p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$75.00</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">Luxurious feel, vibrant patterns.</p>
</div>
</div>
</div>
</div> -->
<!-- Tab Content 3: On Sale (hidden by default, for demonstration) -->
<!-- <div class="hidden space-y-6">
<h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Limited-Time Offers</h2>
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
Grab these incredible deals before they're gone! Premium items at unbeatable prices, available for a short period only.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
<img src="https://picsum.photos/seed/sale1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
<div class="text-center md:text-left">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Designer Handbag</h3>
<p class="text-gray-500 dark:text-gray-400 line-through text-md">$450.00</p>
<p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$225.00</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">50% off! Limited stock.</p>
</div>
</div>
<div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
<img src="https://picsum.photos/seed/sale2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
<div class="text-center md:text-left">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Luxury Scented Candle Set</h3>
<p class="text-gray-500 dark:text-gray-400 line-through text-md">$90.00</p>
<p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$60.00</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">30% off! Perfect gift.</p>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>Related Components
Glassmorphism Tabs Component
Simple Glassmorphism Tabs Component for Portfolio, with responsive design and dark theme support. Uses vibrant color scheme.
Tabs Component
A minimalist and vibrant Tabs Component for e-commerce with moderate complexity, responsive design, and dark theme support, implemented using Tailwind CSS and HTML.
Art Deco News Tabs Component
A complex, responsive, and luxurious 'Art Deco' style tabs component designed for news and journalism websites, featuring geometric patterns, rich analogous colors, and dark mode support. It provides multiple interactive elements for content navigation.