Componente Pestañas
Componente de pestañas responsivas con tonos de tierra y microinteracciones para sitios web comerciales, compatible con el modo oscuro usando Tailwind CSS. Utiliza solo las clases HTML y Tailwind.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-md">
<div class="flex justify-center">
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tl-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-state="active" data-tab="tab1">
About Us
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab2">
Our Services
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tr-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab3">
Contact
</button>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-b-lg shadow-md">
<div data-tab-content="tab1">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Our Company Story</h2>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="https://picsum.photos/400/200" alt="Company Image" class="mt-4 rounded-md">
</div>
<div class="hidden" data-tab-content="tab2">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">What We Offer</h2>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300">
<li>Consulting Services</li>
<li>Development & Design</li>
<li>Marketing Solutions</li>
</ul>
<img src="https://picsum.photos/400/201" alt="Services Image" class="mt-4 rounded-md">
</div>
<div class="hidden" data-tab-content="tab3">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Get in Touch</h2>
<p class="text-gray-600 dark:text-gray-300">Email: [email protected]</p>
<p class="text-gray-600 dark:text-gray-300">Phone: (123) 456-7890</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="text-gray-800 dark:text-white">John Doe, CEO</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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 neumorfismo
Un componente de pestañas neumórficas para interfaces de usuario de paneles, con un esquema de color en escala de grises, diseño receptivo y compatibilidad con temas oscuros que usan solo HTML y Tailwind CSS.
Componente Pestañas
Un componente de pestañas responsivas diseñado en un estilo skeuomórfico para una aplicación de comercio electrónico, utilizando un esquema de color pastel y Tailwind CSS.