Componente Pestañas
Un componente de pestañas responsivas diseñado para interfaces de redes sociales, con microinteracciones y un tema oscuro. El componente incluye múltiples elementos interactivos y utiliza Tailwind CSS.
Código HTML
<div class="bg-gray-900 dark:bg-gray-800 p-4 rounded-lg">
<div class="flex space-x-4 border-b border-gray-700">
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600" aria-selected="true">Tab 1</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 2</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 3</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 4</button>
</div>
<div class="mt-4">
<div class="tab-content py-6 px-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-white">Tab 1 Content</h2>
<p class="text-gray-300 dark:text-gray-200">This is the content for Tab 1. It could include various elements like images, text, and interactive features.</p>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded mb-2">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-200 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Pestañas
Un componente de pestañas receptivo con un diseño esqueuomórfico, un esquema de color análogo y un soporte de tema oscuro, adecuado para sitios web comerciales profesionales. El componente utiliza Tailwind CSS para el estilo y no incluye JavaScript.
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.
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.