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

玻璃化灰度标签

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

预览

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>

相关组件

Neumorphism 选项卡组件

用于仪表板 UI 的中构选项卡组件,具有灰度配色方案、响应式设计和深色主题支持,仅使用 HTML 和 Tailwind CSS。

打开

标签组件

一个用于电子商务网站的极简标签组件,具有互动元素、响应式设计和黑暗模式支持.

打开

选项卡组件

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

打开