Luxury_Tabs_Component
Un componente de pestañas simple, elegante y receptivo diseñado para su uso en el mercado, con una estética de lujo/premium con un esquema de color complementario y soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
MaterialDesignTabs
Un componente de pestañas responsivas que sigue los principios de Material Design con Tailwind CSS, incluida la compatibilidad con el modo oscuro y los efectos responsivos.
Pestañas de diseño de materiales
Componente de pestañas con estilo Material Design, efectos responsivos y soporte de temas oscuros usando Tailwind CSS, sin JavaScript.
Componente de pestañas de noticias Art Deco
Un componente de pestañas de estilo 'Art Deco' complejo, receptivo y lujoso diseñado para sitios web de noticias y periodismo, con patrones geométricos, colores análogos intensos y soporte para modo oscuro. Proporciona múltiples elementos interactivos para la navegación de contenido.