CCHub Logo CCHub Tailwind Collection
Komponenten Tabulatoren Glassmorphism Tabs-Komponente

Glassmorphism Tabs-Komponente

Einfache Glassmorphism Tabs-Komponente für Portfolio, mit responsivem Design und Unterstützung für dunkle Themen. Verwendet ein lebendiges Farbschema.

Vorschau

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>

Verwandte Komponenten

Tabs-Komponente

Eine responsive Tabs-Komponente mit Mikrointeraktionen für Geschäfts-/Unternehmenswebsites mit Komplementärfarben und Unterstützung für den Dunkelmodus.

Offen

Art Deco News Tabs Komponente

Eine komplexe, reaktionsschnelle und luxuriöse Tab-Komponente im Art-Déco-Stil, die für Nachrichten- und Journalismus-Websites entwickelt wurde, mit geometrischen Mustern, satten analogen Farben und Unterstützung des Dunkelmodus. Es bietet mehrere interaktive Elemente für die Inhaltsnavigation.

Offen

Tabs-Komponente

Eine reaktionsschnelle Tabs-Komponente mit Material Design-Stil, monochromatischem Farbschema und Unterstützung für dunkle Themen, die mit Tailwind CSS für inhaltsintensive Websites erstellt wurde.

Offen