Luxury_Tabs_Component
Un composant d’onglets simple, élégant et réactif conçu pour une utilisation sur le marché, doté d’une esthétique luxueuse/premium avec une palette de couleurs complémentaire et une prise en charge du mode sombre.
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>Composants associés
Composant Glassmorphism Tabs
Un composant d’onglets réactifs avec le style glassmorphism, conçu pour les interfaces de médias sociaux. Il présente un effet de verre dépoli utilisant Tailwind CSS avec une palette de couleurs en niveaux de gris. La conception prend en charge le mode sombre.
Onglets de conception matérielle
Composant Tabs avec style Material Design, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS, sans JavaScript.
Composant Onglets neumorphes
Un composant d’onglets neumorphiques en niveaux de gris pour le contenu de blog, avec un design réactif et la prise en charge du mode sombre.