Componente de pestañas de Glassmorphism
Componente simple de pestañas de Glassmorphism para Portfolio, con diseño responsivo y soporte para temas oscuros. Utiliza una combinación de colores vibrantes.
Código HTML
<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-900 p-8">
<div class="w-full max-w-md bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-xl">
<div class="flex border-b border-gray-200 dark:border-gray-700">
<button class="flex-1 py-2 px-4 text-center text-lg font-medium text-indigo-700 dark:text-indigo-300 border-b-2 border-indigo-500 dark:border-indigo-400 focus:outline-none">Projects</button>
<button class="flex-1 py-2 px-4 text-center text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-300 focus:outline-none">About</button>
<button class="flex-1 py-2 px-4 text-center text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-300 focus:outline-none">Contact</button>
</div>
<div class="mt-6 text-gray-700 dark:text-gray-300">
<!-- Tab content goes here -->
<p>This is the content for the Projects tab. You can replace this with your actual portfolio items.</p>
</div>
</div>
</div>Componentes relacionados
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.
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.
Componente Pestañas - Trabajo/Carrera
Un componente de pestañas responsivo con una estética de Material Design y una combinación de colores pastel, adecuado para bolsas de trabajo o plataformas profesionales. Incluye soporte para modo oscuro.