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

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

Tailwind CSS を使用したダーク テーマのサポートを備えた、スキューモーフィックな方法でスタイル設定されたレスポンシブ サイドバー ナビゲーション コンポーネント。

プレビュー

HTMLコード

<div class="flex">
  <aside class="bg-gray-900 text-white w-64 h-screen shadow-lg rounded-r-3xl p-5">
    <div class="flex flex-col items-center mb-10">
      <img class="rounded-full border-4 border-gray-700" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" width="100" height="100" />
      <h2 class="mt-3 text-xl font-bold">John Doe</h2>
      <p class="text-gray-400">Web Developer</p>
    </div>
    <nav>
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=1" alt="Icon" />
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=2" alt="Icon" />
            Profile
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=3" alt="Icon" />
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=4" alt="Icon" />
            Help
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=5" alt="Icon" />
            Logout
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="flex-1 p-10 bg-gray-200">
    <h1 class="text-3xl font-bold">Main Content Area</h1>
    <p>This is where your main content goes.</p>
  </main>
</div>

関連コンポーネント

レトロパステルソーシャルサイドバー

レトロ/ビンテージの80年代/90年代のデザイン、パステルカラー、ダークモードのサポートを備えたシンプルでレスポンシブなサイドバーナビゲーションコンポーネントで、Tailwind CSSを使用したソーシャルメディアインターフェイス用に設計されています。

開ける

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

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

開ける

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

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

開ける