머티리얼 디자인 탭

머티리얼 디자인 스타일, 반응형 효과 및 어두운 테마가 있는 탭 구성 요소는 JavaScript 없이 Tailwind CSS를 사용합니다.

미리 보기

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>

머티리얼 디자인 탭

미리 보기

HTML 코드

관련 구성 요소

탭 구성 요소

탭 구성 요소

Glassmorphism Tabs 구성 요소