ArtDecoTabsComponent
Un componente de pestañas complejo y sensible con una estética Art Deco, diseñado para portafolios de fotografía, con tonos azules corporativos y soporte para modo oscuro.
Código HTML
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 md:p-8 lg:p-12">
<div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-2xl overflow-hidden rounded-lg border-4 border-blue-800 dark:border-blue-500 transform skew-y-1 md:skew-y-0 duration-300 ease-in-out">
<div class="p-6 md:p-8 lg:p-10 bg-blue-900 dark:bg-blue-950 text-white transform -skew-y-1 md:skew-y-0">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-['Playfair_Display'] font-bold text-center tracking-wider uppercase text-blue-100 dark:text-blue-50 drop-shadow-lg leading-tight">
<span class="block">The Lumina Gallery</span>
<span class="block text-xl sm:text-2xl lg:text-3xl font-light italic mt-2">A Lens to the Soul</span>
</h2>
<p class="text-blue-200 dark:text-blue-100 text-center mt-4 max-w-2xl mx-auto text-sm sm:text-base md:text-lg opacity-90">
Explore curated collections and captivating moments through our Art Deco inspired visual journey.
</p>
</div>
<div class="flex flex-col md:flex-row flex-wrap justify-center bg-blue-800 dark:bg-blue-900 py-3 md:py-4 border-b-2 border-blue-600 dark:border-blue-700 relative z-10">
<input type="radio" name="tabs" id="tab-all" class="hidden" checked>
<label for="tab-all" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
All Galleries
</label>
<input type="radio" name="tabs" id="tab-portraits" class="hidden">
<label for="tab-portraits" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
Portraits
</label>
<input type="radio" name="tabs" id="tab-landscapes" class="hidden">
<label for="tab-landscapes" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
Landscapes
</label>
<input type="radio" name="tabs" id="tab-conceptual" class="hidden">
<label for="tab-conceptual" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
Conceptual
</label>
<style>
.tab-label:has(~ input[type="radio"]:checked) {
background: linear-gradient(to bottom, var(--tw-gradient-stops));
--tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
--tw-gradient-to: #172554 var(--tw-gradient-to-position);
color: #bfdbfe; /* blue-200 */
border-color: #60a5fa; /* blue-400 */
transform: translateY(-4px) scale(1.02); /* Slight lift */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.dark .tab-label:has(~ input[type="radio"]:checked) {
background: linear-gradient(to bottom, var(--tw-gradient-stops));
--tw-gradient-from: #0c0a09 var(--tw-gradient-from-position); /* stone-950 */
--tw-gradient-to: #0f172a var(--tw-gradient-to-position); /* slate-900 */
color: #bfdbfe; /* blue-200 */
border-color: #60a5fa; /* blue-400 */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
</style>
</div>
<div class="tab-content px-4 py-8 md:px-8 md:py-10 bg-gray-50 dark:bg-gray-800 relative z-0">
<div id="content-all" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10">
<h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">All Works Unified</h3>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://picsum.photos/id/1018/600/400" alt="Forest Stream" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Whispers of the Wild</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">Nature's symphony in a serene woodland setting.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://picsum.photos/id/1012/600/400" alt="Portrait of a woman" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Glimpse of Serenity</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">A captivating study of human emotion and light.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://picsum.photos/id/1043/600/400" alt="Geometric abstraction" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Abstract Reverie</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">Lines and light weaving an intricate visual narrative.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://picsum.photos/id/1054/600/400" alt="City landscape at night" class="w-full h-48 object-cover object-bottom transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Urban Nocturne</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">Vibrant cityscapes under the twilight's embrace.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
</div>
<div id="content-portraits" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10 pointer-events-none">
<h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">Faces & Souls</h3>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Portrait 1" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">The Gaze</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">Deep connections through the eyes.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Portrait 2" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Reflections</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">A moment of quiet contemplation.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Portrait 3" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Vivid Spirit</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">Capturing the essence of a vibrant personality.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
</div>
<div id="content-landscapes" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10 pointer-events-none">
<h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">Vistas & Horizons</h3>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://picsum.photos/id/1069/600/400" alt="Mountain range" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Peaks of Tranquility</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">Majestic mountains under a clear sky.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://picsum.photos/id/1070/600/400" alt="Desert dunes" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Sand Dunes Echo</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">Endless desert patterns carved by wind.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
</div>
<div id="content-conceptual" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10 pointer-events-none">
<h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">Mind & Metaphor</h3>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://picsum.photos/id/292/600/400" alt="Abstract shapes" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Geometric Serenity</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">The elegance of form and structure.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
<div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
<img src="https://picsum.photos/id/296/600/400" alt="Minimalist architecture" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
<div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Silent Structures</h4>
<p class="text-sm text-gray-600 dark:text-gray-300">Architectural forms speaking volumes in silence.</p>
<a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('input[name="tabs"]').forEach(input => {
input.addEventListener('change', (e) => {
const targetId = `content-${e.target.id.split('-')[1]}`;
document.querySelectorAll('.tab-pane').forEach(pane => {
pane.classList.add('opacity-0', 'absolute', 'top-0', 'left-0', 'w-full', 'p-4', 'md:p-8', 'lg:p-10', 'pointer-events-none');
pane.classList.remove('relative', 'opacity-100');
});
const activePane = document.getElementById(targetId);
if (activePane) {
activePane.classList.remove('opacity-0', 'absolute', 'top-0', 'left-0', 'w-full', 'p-4', 'md:p-8', 'lg:p-10', 'pointer-events-none');
activePane.classList.add('relative', 'opacity-100');
}
});
});
// Initial load to show the first tab
document.querySelector('#tab-all').checked = true;
document.getElementById('content-all').classList.remove('opacity-0', 'absolute', 'top-0', 'left-0', 'w-full', 'p-4', 'md:p-8', 'lg:p-10', 'pointer-events-none');
document.getElementById('content-all').classList.add('relative', 'opacity-100');
</script>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 Pestañas
Un componente de pestañas responsivo con soporte de modo oscuro para el consumo de blog/contenido. Utiliza un esquema de color triádico con fondos oscuros para reducir la fatiga visual.
Componente de pestañas de Glassmorphism
Un componente de pestañas responsivo con estilo glassmorphism, diseñado para interfaces de redes sociales. Presenta un efecto similar al vidrio esmerilado usando Tailwind CSS con un esquema de color en escala de grises. El diseño es compatible con el modo oscuro.