머티리얼 디자인 탭
머티리얼 디자인 스타일, 반응형 효과 및 어두운 테마가 있는 탭 구성 요소는 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>