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
Componente de pestañas de Material Design
Un componente de pestañas de estilo Material Design que utiliza Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Componente de pestañas neumórficas
Un componente de pestañas neumórficas en escala de grises para el contenido del blog, con diseño responsivo y soporte para modo oscuro.
Componente de pestañas skeuomórficas
Un componente de pestañas responsivo con estilo skeuomorphism, que utiliza Tailwind CSS para imitar elementos de diseño del mundo real. Incluye soporte para temas oscuros e imágenes de marcador de posición.