Composant Glassmorphism Tabs
Composant simple d’onglets Glassmorphism pour portefeuille, avec un design réactif et une prise en charge du thème sombre. Utilise une palette de couleurs vives.
HTML Code
<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>Composants associés
Composant Onglets neumorphes
Un composant d’onglets neumorphiques en niveaux de gris pour le contenu de blog, avec un design réactif et la prise en charge du mode sombre.
Composant Onglets
Un composant d’onglets réactifs conçu pour le mode sombre à l’aide de Tailwind CSS. Il comporte différents onglets sur lesquels les utilisateurs peuvent cliquer pour révéler du contenu, ainsi que des images et des avatars de remplacement.
Composant Glassmorphism Tabs
Un composant d’onglets réactifs avec le style glassmorphism, conçu pour les interfaces de médias sociaux. Il présente un effet de verre dépoli utilisant Tailwind CSS avec une palette de couleurs en niveaux de gris. La conception prend en charge le mode sombre.