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

Komponente auf Registerkarten "Materialdesign"

Eine Tabs-Komponente im Material Design-Stil mit Tailwind CSS mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Luxury_Tabs_Component

Eine einfache, elegante und reaktionsschnelle Tabs-Komponente, die für den Marktplatz entwickelt wurde und sich durch eine Luxus-/Premium-Ästhetik mit einem komplementären Farbschema und Unterstützung für den Dunkelmodus auszeichnet.

Offen

Tabs-Komponente

Eine minimalistische und lebendige Tabs-Komponente für den E-Commerce mit moderater Komplexität, responsivem Design und Unterstützung für dunkle Themen, implementiert mit Tailwind CSS und HTML.

Offen