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

Componente Schede reattive con toni della terra e microinterazioni per siti Web aziendali, che supporta la modalità oscura utilizzando Tailwind CSS. Utilizza solo le classi HTML e Tailwind.

Aperto

Schede di progettazione dei materiali Componente

Un componente di schede complesso e monocromatico ispirato al Material Design per le dashboard, con design reattivo, supporto per la modalità oscura ed elementi interattivi. Utilizza layout basati su griglia e sottili effetti di ombra.

Aperto

Componente Art Deco News Tabs

Un componente complesso, reattivo e lussuoso in stile "Art Déco" progettato per siti Web di notizie e giornalismo, con motivi geometrici, colori analoghi ricchi e supporto per la modalità scura. Fornisce più elementi interattivi per la navigazione dei contenuti.

Aperto