CCHub Logo CCHub Tailwind Collection
コンポーネント サイドバー サイドバーコンポーネント

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

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

プレビュー

HTMLコード 

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-white dark:bg-gray-950 dark:text-gray-200 flex flex-col">
    <div class="p-6 text-2xl font-bold border-b border-gray-700 dark:border-gray-800">BrutalNav</div>
    <nav class="flex-grow">
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Home</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">About</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Services</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
  </div>

  <!-- Content Area (placeholder) -->
  <div class="flex-grow p-10 text-gray-800 dark:text-gray-200">
    <h1 class="text-3xl font-bold mb-6">Main Content</h1>
    <p>This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

関連コンポーネント

シンプルで活気に満ちたブログサイドバー

Tailwind CSSを使用して鮮やかな色とマテリアルのような感触でデザインされた、ブログコンテンツ用のシンプルでレスポンシブなサイドバーコンポーネント。ナビゲーションリンクとユーザープロファイルセクションが含まれています。Tailwind の dark: プレフィックスを使用したダーク モードをサポートします。大きな画面では固定され、小さな画面では非表示になります。

開ける

レトロなサイドバーコンポーネント

作品や製品を展示するためのレトロ/ビンテージデザインのレスポンシブサイドバーコンポーネントで、グレースケールの配色とTailwind CSSクラスを利用し、ダークモードをサポートします。

開ける

ダークモードのGlassmorphismサイドバー

glassmorphism デザインと Tailwind CSS を使用したダーク モードのサポートを備えたレスポンシブ サイドバー コンポーネント。これには、ロゴ、サイト名、ナビゲーションリンク、およびユーザープロファイルセクションが含まれます。

開ける