CCHub Logo CCHub Tailwind Collection
コンポーネント サイドバーナビゲーション ソーシャルメディアサイドバーナビゲーションコンポーネント

ソーシャルメディアサイドバーナビゲーションコンポーネント

レスポンシブ ソーシャル メディア サイドバー ナビゲーション コンポーネント ダーク テーマ ブルータリズム、アース トーン、および複雑なデザイン原則を使用したサポート。JavaScript は必要ありません。

プレビュー

HTMLコード 

<div class="flex h-screen bg-stone-100 dark:bg-stone-900">

  <!-- Sidebar -->
  <div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out" id="sidebar">
    
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full border-4 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100">Username</h2>
        <p class="text-sm text-stone-700 dark:text-stone-300">@userhandle</p>
      </div>
    </div>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Navigation -->
    <nav class="space-y-4">
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Feed</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Profile</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Messages</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Notifications</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Settings</a>
    </nav>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Footer Links -->
    <div class="flex flex-wrap gap-2 text-sm text-stone-700 dark:text-stone-300">
      <a href="#" class="hover:underline focus:underline">About</a>
      <a href="#" class="hover:underline focus:underline">Help</a>
      <a href="#" class="hover:underline focus:underline">Terms</a>
      <a href="#" class="hover:underline focus:underline">Privacy</a>
    </div>

  </div>

  <!-- Content Area - Example -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">Main Content Area</h1>
    </div>

</div>

関連コンポーネント

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

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

開ける

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

アース トーン、適度な複雑さ、応答性、ダーク モードのサポートを備えたブルータリスト スタイルのサイドバー ナビゲーション コンポーネントで、Tailwind CSS を使用するブログ/コンテンツ サイト向けに設計されています。

開ける

Eコマースサイドバーナビゲーション

Tailwind CSSで構築された、トライアドカラースキーム、ホバー時のマイクロインタラクション、ダークモードのサポートを特徴とする、eコマースWebサイト用のシンプルでレスポンシブなサイドバーナビゲーションコンポーネント。

開ける