CCHub Logo CCHub Tailwind Collection
コンポーネント サイドバーナビゲーション レトロサイドバーナビゲーション

レトロサイドバーナビゲーション

ビジネス/企業のWebサイト向けのレスポンシブでシンプルなレトロ/ビンテージパステルカラーのサイドバーナビゲーションコンポーネントで、ダークモードがサポートされています。

プレビュー

HTMLコード 

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
    <div>
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
      <nav>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
          Dashboard
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Analytics
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Reports
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Settings
        </a>
      </nav>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
    </div>
  </div>

  <!-- Content Area (for demonstration purposes) -->
  <div class="flex-1 p-8">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
    <p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
  </div>
</div>

関連コンポーネント

サイドバーナビゲーションコンポーネント

3Dデザイン要素、類似の配色、インタラクティブ機能を備えた中程度の複雑さを備えたレスポンシブサイドバーナビゲーションコンポーネント。ブログやコンテンツWebサイトに適しています。

開ける

サイドバーナビゲーションコンポーネント

ブログ用に調整されたサイドバーナビゲーションコンポーネントで、3D要素と鮮やかな色で設計されています。ダークモードをサポートし、レスポンシブで、コンテンツの消費に適したシンプルなレイアウトが特徴です。

開ける

Glassmorphismサイドバーナビゲーション

複雑でレスポンシブなGlassmorphismサイドバーナビゲーションは、補完的な配色、ダークモードのサポート、JavaScriptなしのダッシュボード用です。

開ける