组件 制表符 玻璃化灰度标签

玻璃化灰度标签

支持深色模式的玻璃态灰度简单仪表板标签组件

预览

HTML 代码

<div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg">
  <div class="border-b border-gray-200 dark:border-gray-700">
    <nav class="-mb-0.5 flex space-x-6" aria-label="Tabs">
      <a href="#" class="py-2 px-1 inline-flex items-center border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600">
        Dashboard
      </a>
      <a href="#" class="py-2 px-1 inline-flex items-center border-b-2 border-gray-500 text-sm font-medium text-gray-600 dark:text-gray-300 dark:border-gray-400">
        Reports
      </a>
      <a href="#" class="py-2 px-1 inline-flex items-center border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600">
        Settings
      </a>
    </nav>
  </div>
  <div class="mt-4">
    <!-- Tab content goes here -->
    <p class="text-gray-700 dark:text-gray-300">Content for the selected tab.</p>
  </div>
</div>

相关组件

选项卡组件

一个为暗黑模式设计的响应式选项卡组件,使用Tailwind CSS。它具有不同的选项卡,用户可以点击以展示内容,并附带占位符图片和头像。

打开

材料设计标签

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

打开

标签组件

用于商业网站的响应式标签组件,带有大地色调和微交互,支持使用Tailwind CSS的黑暗模式,仅使用HTML和Tailwind类.

打开