Componente Pestañas
Un componente de pestañas minimalista para sitios web de comercio electrónico con elementos interactivos, diseño receptivo y soporte para modo oscuro.
Código HTML
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md">
<div class="flex items-center space-x-4 border-b">
<button class="py-2 px-4 text-blue-500 border-b-2 border-blue-500 focus:outline-none">Tab 1</button>
<button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 2</button>
<button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 3</button>
</div>
<div class="p-4">
<div class="block" id="tab1-content">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 1 Content</h2>
<img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
<p class="mt-2 text-gray-600 dark:text-gray-400">Explore our exclusive collections in Tab 1. Discover vibrant products that can elevate your shopping experience.</p>
</div>
<div class="hidden" id="tab2-content">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 2 Content</h2>
<img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/401" alt="Random Image">
<p class="mt-2 text-gray-600 dark:text-gray-400">Find the latest trends and styles in Tab 2. Shop now and enjoy premium materials and designs.</p>
</div>
<div class="hidden" id="tab3-content">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 3 Content</h2>
<img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/402" alt="Random Image">
<p class="mt-2 text-gray-600 dark:text-gray-400">Check out special deals and discounts in Tab 3. Your ultimate shopping destination is right here.</p>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente Pestañas
Un componente de pestañas minimalista y vibrante para comercio electrónico con complejidad moderada, diseño receptivo y soporte de temas oscuros, implementado con Tailwind CSS y HTML.
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.