CCHub Logo CCHub Tailwind Collection
Komponenten Tabulatoren Registerkarten für Materialdesign

Registerkarten für Materialdesign

Tabs-Komponente mit Material Design-Stil, responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS ohne JavaScript.

Vorschau

HTML-Code 

<div class="material-tabs">
  <div class="tab-header">
    <div class="tab-button active">Tab 1</div>
    <div class="tab-button">Tab 2</div>
    <div class="tab-button">Tab 3</div>
  </div>
  <div class="tab-content active">
    <h2>Content for Tab 1</h2>
    <p>This is the content for the first tab. It uses Material Design principles for layout and appearance.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 2</h2>
    <p>This is the content for the second tab.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 3</h2>
    <p>This is the content for the third tab.</p>
  </div>
</div>

Verwandte Komponenten

Komponente "Neumorphic Tabs"

Eine neumorphe Tabs-Komponente in Graustufen für Blog-Inhalte mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Tabs-Komponente

Eine responsive Tabs-Komponente, die für Social-Media-Schnittstellen entwickelt wurde, mit Mikrointeraktionen und einem dunklen Thema. Die Komponente enthält mehrere interaktive Elemente und verwendet Tailwind CSS.

Offen

Glassmorphism Tabs-Komponente

Eine responsive Tabs-Komponente im Glassmorphism-Stil, die für Social-Media-Schnittstellen entwickelt wurde. Es verfügt über einen Milchglas-ähnlichen Effekt unter Verwendung von Tailwind CSS mit einem Graustufen-Farbschema. Das Design unterstützt den Dunkelmodus.

Offen