组件 制表符 材料设计标签

材料设计标签

一个采用材料设计风格的标签组件,使用Tailwind CSS,具有响应效果和暗黑主题支持,无需JavaScript。

预览

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>

相关组件

玻璃态标签组件

用于 Portfolio 的简单 Glassmorphism 选项卡组件,具有响应式设计和深色主题支持。使用鲜艳的配色方案。

打开

标签组件

一个极简主义且充满活力的标签组件,用于电子商务,具有适度复杂性、响应式设计和深色主题支持,使用 Tailwind CSS 和 HTML 实现。

打开

材料设计标签

一个遵循Material Design原则的响应式选项卡组件,使用Tailwind CSS,包括暗模式支持和响应式效果。

打开