CCHub Logo CCHub Tailwind Collection
コンポーネント ナビゲーションコンポーネント Brutalist_Dating_Navigation_Simple

Brutalist_Dating_Navigation_Simple

ブルータリズムにインスパイアされたシンプルなデート/ソーシャルアプリ用のナビゲーションバーで、ハイコントラスト要素、温かみのあるニュートラル、ダークモードをサポートする完全な応答性を備えています。

プレビュー

HTMLコード 

<nav class="bg-stone-200 dark:bg-stone-900 shadow-md p-4 sticky top-0 z-50 transition-colors duration-300">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <div class="flex items-center space-x-2">
      <a href="#" class="font-black text-2xl tracking-tighter text-stone-900 dark:text-stone-50 uppercase border-2 border-stone-900 dark:border-stone-50 px-2 py-1 transform -rotate-3 hover:rotate-0 transition-transform duration-200 ease-out">
        <span class="text-orange-600 dark:text-orange-400">FLIRT</span>
        <span class="hidden sm:inline">NET</span>
      </a>
    </div>
    <ul class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 text-sm font-bold uppercase">
      <li>
        <a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
          Matches
          <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
        </a>
      </li>
      <li>
        <a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
          Explore
          <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
        </a>
      </li>
      <li>
        <a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
          Messages
          <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
        </a>
      </li>
      <li>
        <a href="#" class="text-stone-800 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 relative group transition-colors duration-200 tracking-tight">
          Profile
          <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-600 dark:bg-orange-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-200 origin-left"></span>
        </a>
      </li>
    </ul>
  </div>
</nav>

関連コンポーネント

RetroDashboardナビゲーション

レトロなテーマの複雑なダッシュボードナビゲーションコンポーネントで、トライアドカラースキームで、データの視覚化とコントロールパネル用に設計されています。レスポンシブデザイン、ダークモードのサポート、80年代/90年代の美学に触発された複数のインタラクティブ要素を備えています。

開ける

ダークモードポートフォリオナビゲーション

ポートフォリオ Web サイト用の複雑でレスポンシブなナビゲーション コンポーネントで、類似色のダーク モード UI が特徴で、作業や製品を紹介するように設計されています。デスクトップ、タブレット、モバイルのレイアウトとドロップダウンとユーザーアバターが含まれます。

開ける

ネオングローガバメントナビゲーション

ネオンカラー、キャンディースイートな配色、ダークモードのサポートを備えた、政府/公共サービス向けのレスポンシブナビゲーションコンポーネント。明るく光る要素と鮮やかな照明効果が特徴です。

開ける