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.
Código HTML
<div class="w-full">
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-0.5 flex space-x-6" aria-label="Tabs">
<button type="button" class="group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium" aria-current="page">
<svg class="mr-2 h-5 w-5 text-indigo-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M1.5 1.5A.75.75 0 000 2.25v13.5a.75.75 0 00.75.75h15a.75.75 0 00.75-.75V2.25a.75.75 0 00-.75-.75H1.5zM10.5 6a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6zm3 0a.75.75 0 00-1.5 0v6a.75.75 0 001.5 0V6zM6 3a.75.75 0 00-1.5 0v9a.75.75 0 001.5 0V3z" clip-rule="evenodd" />
</svg>
<span class="text-indigo-600 dark:text-indigo-400">My Account</span>
</button>
<button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
<svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 3a.375.375 0 11-.75 0 .375.375 0 01.75 0zm1.875-3a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 3a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.375 21a1.125 1.125 0 001.125 1.125h15A1.125 1.125 0 0020.625 21V6.75a1.125 1.125 0 00-1.125-1.125h-15a1.125 1.125 0 00-1.125 1.125V21zM19.125 6.75a.375.375 0 00-.375-.375H4.875a.375.375 0 00-.375.375v13.5c0 .207.168.375.375.375h15c.207 0 .375-.168.375-.375V6.75z" clip-rule="evenodd" />
</svg>
<span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Company</span>
</button>
<button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
<svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M10.5 6a.75.75 0 100 1.5 1.5 1.5 0 011.5 1.5v1.5a.75.75 0 101.5 0V9a3 3 0 00-3-3zM3 19.5a1.5 1.5 0 011.5-1.5h15a1.5 1.5 0 011.5 1.5v.75a.75.75 0 01-.75.75H3.75a.75.75 0 01-.75-.75v-.75zM3 6.75A.75.75 0 013.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 013 7.5v-.75zM6 6.75A.75.75 0 016.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 016 7.5v-.75zM9 6.75A.75.75 0 019.75 6h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 019 7.5v-.75z" />
</svg>
<span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Teams</span>
</button>
<button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
<svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M12 1.5a.75.75 0 01.75.75V3a.75.75 0 01-1.5 0V2.25a.75.75 0 01.75-.75zM12 21a.75.75 0 01.75.75V22.5a.75.75 0 01-1.5 0V21.75a.75.75 0 01.75-.75zM19.5 8.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0V8.25zM6 8.25a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0V8.25zM19.5 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM6 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM15.75 3.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.75 3.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM15.75 18.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM6.75 18.75a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5h-1.5zM12 6.75a3 3 0 100 6 3 3 0 000-6z" />
</svg>
<span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Billing</span>
</button>
<button type="button" class="group inline-flex items-center border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
<svg class="mr-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z" clip-rule="evenodd" />
</svg>
<span class="text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300">Integrations</span>
</button>
</nav>
</div>
</div>Componentes relacionados
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.
GlassyGrayscaleTabs
Glassmorphism Componente de pestañas de tablero simple en escala de grises con soporte para modo oscuro
Componente de pestañas de modo oscuro
Un componente de pestañas responsivo diseñado teniendo en cuenta el modo oscuro, que utiliza Tailwind CSS.