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 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.
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.
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.