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

Tabs-Komponente

Eine responsive Tabs-Komponente, die in einem skeuomorphen Stil für eine E-Commerce-Anwendung entworfen wurde, unter Verwendung eines pastellfarbenen Farbschemas und Tailwind CSS.

Offen

Tabs-Komponente

Eine responsive Tabs-Komponente mit einem skeuomorphen Design, einem analogen Farbschema und einer Unterstützung für dunkle Themen, die für professionelle Business-Websites geeignet ist. Die Komponente verwendet Tailwind CSS für das Styling und enthält kein JavaScript.

Offen

Tabs-Komponente

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

Offen