Components Tabs Material Design Tabs

Material Design Tabs

Tabs Component with Material Design style, responsive effects, and dark theme support using Tailwind CSS, with no JavaScript.

Preview

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>

Related Components

Tabs Component

Responsive Tabs Component with Earth tones and Microinteractions for Business websites, supporting dark mode using Tailwind CSS. Uses only HTML and Tailwind classes.

Open

Tabs Component

A responsive tabs component designed for dark mode using Tailwind CSS. It features different tabs that users can click to reveal content, along with placeholder images and avatars.

Open

Tabs Component

A responsive tabs component with microinteractions for business/corporate websites, featuring complementary colors and dark mode support.

Open