Componenti Schede Schede di Material Design

Schede di Material Design

Componente Tabs con stile Material Design, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS, senza JavaScript.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente Schede Skeuomorfe

Un componente di schede reattive con scheumorfismo, che utilizza Tailwind CSS per imitare gli elementi di design del mondo reale. Include il supporto per il tema scuro e le immagini segnaposto.

Aperto

Componente Schede Glassmorphism

Semplice componente Glassmorphism Tabs per Portfolio, con design reattivo e supporto per temi scuri. Utilizza una combinazione di colori vivaci.

Aperto

Componente Schede

Un componente Schede reattivo con stile Material Design, combinazione di colori monocromatici e supporto per temi scuri, creato con Tailwind CSS per siti Web ricchi di contenuti.

Aperto