CCHub Logo CCHub Tailwind Collection
コンポーネント タブ Glassyグレースケールタブ

Glassyグレースケールタブ

Glassmorphism Grayscale Simple Dashboard Tabs コンポーネント (ダークモード対応)

プレビュー

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とHTMLを使用して実装された、eコマース用のミニマリストで活気のあるタブコンポーネント。

開ける

インダストリアルVibrantTabs

マルチベンダーマーケットプレイスに適した、複雑で活気に満ちた産業をテーマにしたタブコンポーネントで、露出した要素、原材料の美学、高彩度の色が特徴です。ダークモードのサポートにより完全にレスポンシブ。

開ける

マテリアルデザインタブコンポーネント

Tailwind CSS を使用したマテリアル デザイン スタイルのタブ コンポーネントで、レスポンシブ エフェクトとダーク テーマのサポートが特徴です。

開ける