CCHub Logo CCHub Tailwind Collection
コンポーネント サイドバー スキューモーフィックパステルサイドバー

スキューモーフィックパステルサイドバー

Skeuomorphic デザインとパステルカラーのシンプルでレスポンシブなサイドバーコンポーネントで、ブログやコンテンツサイトに適しています。ダークモードのサポートが含まれています。

プレビュー

HTMLコード 

<div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-gray-700 shadow-md">
    <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Blog Menu</span>
  </div>
  <nav class="flex-grow p-4">
    <ul class="space-y-2">
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          About
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Contact
        </a>
      </li>
    </ul>
  </nav>
</div>

関連コンポーネント

サイドバーコンポーネント 27

レスポンシブエフェクトとダークテーマのサポートを備えたレトロ/ビンテージスタイルのサイドバーコンポーネント。

開ける

サイドバーコンポーネント

ブルータリズムデザイン、単色の配色、ダークモードのサポートを備えた、シンプルでレスポンシブなサイドバーコンポーネント。

開ける

Neon_Glow_Grayscale_Sports_Sidebar

スポーツ/フィットネスアプリケーション向けの複雑でレスポンシブなサイドバーコンポーネントで、グレースケールの配色内にネオン/グロー効果を備えています。ダークモードのサポートと、プロファイル、ナビゲーション、チーム、設定などのインタラクティブな要素が含まれています。

開ける