検索コンポーネント

カテゴリ

航海法

ユーザーがWebサイト内を移動してコンテンツを見つけるのに役立つコンポーネント

3D_Candy_Finance_Navigation

金融/銀行アプリケーション向けのシンプルで応答性の高いナビゲーションコンポーネントで、キャンディー/スウィートの配色と微妙な3Dデザイン要素が特徴で、ダークモードがサポートされています。

                <nav class="bg-gradient-to-r from-pink-300 via-purple-300 to-blue-300 dark:from-purple-900 dark:via-indigo-900 dark:to-gray-900 shadow-lg relative z-10 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <a href="#" class="flex-shrink-0 flex items-center">
          <svg class="h-8 w-8 text-white dark:text-pink-300 mr-2 drop-shadow-md" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          <span class="text-white dark:text-white text-2xl font-extrabold tracking-tight drop-shadow-md">CandyBank</span>
        </a>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Home
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Accounts
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Services
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
        <a href="#" class="relative inline-flex items-center px-1 pt-1 text-white dark:text-gray-300 text-lg font-medium hover:text-white dark:hover:text-pink-300 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 group">
          Contact
          <div class="absolute bottom-0 left-0 w-full h-0.5 bg-white dark:bg-pink-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        </a>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="bg-pink-400 dark:bg-indigo-700 inline-flex items-center justify-center p-2 rounded-md text-white dark:text-gray-300 hover:text-white hover:bg-pink-500 dark:hower:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:focus:ring-pink-300 drop-shadow-md" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!--
            Heroicon name: outline/menu
            Menu open: "hidden", Menu closed: "block"
          -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!--
            Heroicon name: outline/x
            Menu open: "block", Menu closed: "hidden"
          -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 bg-pink-400 dark:bg-purple-700 hover:bg-pink-500 hover:text-white dark:hover:bg-purple-800 transition duration-300 ease-in-out transform hover:scale-105">
        Home
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
        Accounts
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
        Services
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white dark:text-gray-300 hover:bg-pink-400 hover:text-white dark:hover:bg-purple-700 transition duration-300 ease-in-out transform hover:scale-105">
        Contact
      </a>
    </div>
  </div>
</nav>

ラグジュアリーナビゲーションコンポーネント

ファッションおよび美容ブランド向けのエレガントで応答性の高いナビゲーションコンポーネントで、明るいアクセントカラー、ダークモードのサポート、最小限の要素を備えた洗練された黒と白のデザインが特徴です。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-900 shadow-sm dark:shadow-lg transition duration-300 ease-in-out">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <!-- Logo -->
        <a href="#" class="flex-shrink-0 flex items-center">
          <span class="text-2xl font-bold tracking-wider text-black dark:text-white uppercase font-serif">LUXE</span>
        </a>
      </div>

      <div class="flex items-center">
        <!-- Desktop Navigation -->
        <div class="hidden md:flex md:space-x-8 font-medium">
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Home</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Shop</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Collections</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">About</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Contact</a>
        </div>

        <!-- Mobile Menu Button -->
        <div class="-mr-2 flex md:hidden">
          <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500 dark:focus:ring-red-400 transition duration-200 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed -->
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <!-- Icon when menu is open -->
            <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile Menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 animate-fade-in-down">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Home</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Shop</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Collections</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Contact</a>
    </div>
  </div>
</nav>

3D_Earth_Tone_Dating_Social_Navigation

デート/ソーシャルプラットフォーム向けのレスポンシブナビゲーションコンポーネントで、アースカラーとダークモードをサポートする3Dインスパイアのデザインが特徴です。プロファイルアバター、検索、コアナビゲーションリンクなどの対話型要素が含まれています。

開けるプレビュー

                <nav class="bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-xl relative z-40 rounded-b-xl overflow-hidden">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20 items-center">
      <div class="flex-shrink-0 flex items-center">
        <a href="#" class="text-stone-700 dark:text-stone-300 font-bold text-2xl lg:text-3xl tracking-tight relative">
          <span class="block transform -translate-y-1 -translate-x-1 font-extrabold text-stone-500 opacity-20 dark:text-stone-400">LOV3D</span>
          <span class="absolute top-0 left-0 text-amber-700 dark:text-amber-500">LOV3D</span>
        </a>
      </div>

      <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Home
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Matches
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Messages
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Discover
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
      </div>

      <div class="flex items-center space-x-4">
        <div class="relative hidden sm:block">
          <label for="search-input" class="sr-only">Search</label>
          <input
            type="text"
            id="search-input"
            placeholder="Search..."
            class="pl-10 pr-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 bg-stone-50 dark:bg-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 w-36 lg:w-48 transition-all duration-300 ease-in-out shadow-inner dark:shadow-none"
          />
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>

        <div class="relative group">
          <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-amber-400 dark:focus:ring-offset-stone-800">
            <span class="sr-only">Open user menu</span>
            <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400 shadow-md transform transition-transform duration-300 group-hover:scale-105" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
            <span class="absolute -bottom-1 -right-1 block h-3 w-3 rounded-full bg-green-500 border-2 border-stone-100 dark:border-stone-900"></span>
          </button>
          <!-- Dropdown for profile, settings (hidden by default, can be toggled with JS) -->
          <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-lg shadow-lg py-1 bg-white dark:bg-stone-700 ring-1 ring-black ring-opacity-5 focus:outline-none"></div> -->
        </div>

        <!-- Mobile menu button -->
        <div class="-mr-2 flex md:hidden">
          <button type="button" class="bg-amber-600 dark:bg-amber-700 inline-flex items-center justify-center p-2 rounded-md text-stone-100 dark:text-stone-300 transition duration-150 ease-in-out hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed. -->
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
            <!-- Icon when menu is open. -->
            <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden absolute w-full bg-gradient-to-b from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-lg pb-4 pt-2 -mt-1 transform transition-transform duration-300 ease-out scale-y-0 origin-top" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Home</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Matches</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Messages</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Discover</a>
    </div>
    <div class="border-t border-stone-300 dark:border-stone-700 pt-4 pb-3">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-stone-800 dark:text-stone-200">John Doe</div>
          <div class="text-sm font-medium text-stone-500 dark:text-stone-400">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 px-2 space-y-1">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Sign out</a>
      </div>
    </div>
  </div>
</nav>

<style>
  /* This is a placeholder for JS-driven interactivity to toggle the mobile menu. */
  /* For dynamic demo, you might add a class like 'mobile-menu-open' to 'nav' and manage its visibility. */
  #mobile-menu {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
  }

  /* Example of how it would look when open with JS */
  /* nav.mobile-menu-open #mobile-menu {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  } */
</style>

Monospaceヘルスケアナビゲーション

ヘルスケア/医療アプリケーション向けの複雑で応答性の高いナビゲーションコンポーネントで、温かみのあるニュートラル、ダークモードのサポート、インタラクティブ要素を備えたモノスペース/開発者にインスパイアされたデザインが特徴です。

開けるプレビュー

                <nav class="bg-neutral-100 p-4 font-mono text-neutral-800 shadow-md dark:bg-neutral-900 dark:text-neutral-200">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Brand/Logo (Left) -->
    <a href="#" class="flex items-center text-xl font-bold tracking-tight text-amber-700 dark:text-amber-500">
      <svg class="mr-2 h-6 w-6 stroke-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M10 16L14 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M8 12H16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span class="hidden md:inline">Med OS</span><span class="inline md:hidden">MOS</span>
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <button class="peer block rounded p-2 text-neutral-600 focus:outline-none focus:ring-2 focus:ring-accent-500 dark:text-neutral-300 md:hidden" aria-label="Toggle navigation">
      <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
        <path d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Navigation Links Container -->
    <div class="w-full flex-grow pb-4 md:flex md:w-auto md:items-center md:pb-0 peer-focus:block hidden">
      <ul class="flex flex-col md:ml-auto md:flex-row">
        <li><a href="#dashboard" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Dashboard</a></li>
        <li class="group relative">
          <a href="#patients" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center" aria-haspopup="true" aria-expanded="false">Patients
            <span class="ml-1 inline-block transition-transform duration-200 group-hover:rotate-180 md:hidden sm:inline-block md:group-hover:rotate-180">
              <svg class="h-4 w-4 fill-current" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>
            </span>
          </a>
          <!-- Dropdown Menu -->
          <ul class="hidden md:group-hover:block md:absolute md:top-full md:left-1/2 md:-translate-x-1/2 md:mt-0 md:bg-neutral-100 md:dark:bg-neutral-800 md:shadow-lg md:rounded-b-md md:z-10 group-focus-within:block">
            <li><a href="#add-patient" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">+ Add New</a></li>
            <li><a href="#patient-list" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">View All</a></li>
            <li><a href="#reports" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Reports</a></li>
          </ul>
        </li>
        <li><a href="#appointments" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Appointments</a></li>
        <li><a href="#billing" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Billing</a></li>
        <li><a href="#settings" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Settings</a></li>
      </ul>
    </div>

    <!-- User Avatar & Actions (Right) -->
    <div class="flex items-center space-x-4 ml-auto -mr-2 md:mr-0">
      <!-- Search Icon (for desktop) -->
      <button class="hidden md:block p-2 text-neutral-600 hover:text-amber-700 dark:text-neutral-300 dark:hover:text-amber-500 focus:outline-none focus:ring-2 focus:ring-accent-500" aria-label="Search">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </button>

      <!-- Notifications Icon -->
      <button class="relative p-2 text-neutral-600 hover:text-amber-700 dark:text-neutral-300 dark:hover:text-amber-500 focus:outline-none focus:ring-2 focus:ring-accent-500" aria-label="Notifications">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
        <span class="absolute right-1 top-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white"></span>
      </button>

      <!-- User Avatar with Dropdown -->
      <div class="group relative">
        <button class="flex items-center space-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500" aria-haspopup="true" aria-expanded="false">
          <img class="h-8 w-8 rounded-full border-2 border-amber-700 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <span class="hidden text-neutral-800 dark:text-neutral-200 md:inline">Dr. Anya S.</span>
          <svg class="h-4 w-4 fill-current text-neutral-600 dark:text-neutral-300 md:inline-block transition-transform duration-200 group-hover:rotate-180" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>
        </button>
        <!-- User Dropdown Menu -->
        <ul class="hidden md:group-hover:block md:absolute md:top-full md:right-0 md:mt-2 md:bg-neutral-100 md:dark:bg-neutral-800 md:shadow-lg md:rounded-md md:z-20 md:min-w-[10rem] group-focus-within:block">
          <li><a href="#profile" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Profile</a></li>
          <li><a href="#messages" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Messages</a></li>
          <li><hr class="my-1 border-neutral-300 dark:border-neutral-700"></li>
          <li><a href="#logout" class="block px-4 py-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900">Sign Out</a></li>
        </ul>
      </div>
    </div>

  </div>
</nav>

Corporate_Travel_Navigation

旅行/観光Webサイト用の複雑でクリーンで信頼できる企業スタイルのナビゲーションバー。複数のインタラクティブ要素、完全な応答性、補色を使用したダークモードのサポートを備えています。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-900 shadow-lg dark:shadow-xl">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 font-extrabold text-2xl tracking-tight">
            TravelWise
          </a>
        </div>
        <div class="hidden md:ml-10 md:flex md:space-x-8 lg:space-x-10">
          <a href="#" class="border-blue-500 text-gray-900 dark:text-gray-100 dark:border-blue-400 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out hover:text-blue-600 dark:hover:text-blue-400">
            Flights
          </a>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out">
            Hotels
          </a>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out">
            Packages
          </a>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out">
            Activities
          </a>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out">
            Support
          </a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <div class="relative ml-3">
          <div>
            <button type="button" class="max-w-xs bg-white dark:bg-gray-800 flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full"
                src="https://randomuser.me/api/portraits/men/32.jpg"
                alt="User Avatar">
            </button>
          </div>
          <!-- Dropdown menu (hidden by default) -->
          <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div> -->
        </div>
        <button type="button" class="ml-4 relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition transform duration-200 ease-in-out transform hover:scale-105">
            Book Now
        </button>
      </div>
      <div class="-mr-2 flex items-center md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="bg-white dark:bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 dark:focus:ring-blue-400" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!--
            Heroicon name: outline/menu
            Menu open: "hidden", Menu closed: "block"
          -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!--
            Heroicon name: outline/x
            Menu open: "block", Menu closed: "hidden"
          -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="border-blue-500 text-gray-900 dark:text-gray-100 dark:border-blue-400 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out hover:text-blue-600 dark:hover:text-blue-400">
        Flights
      </a>
      <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out">
        Hotels
      </a>
      <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out">
        Packages
      </a>
      <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out">
        Activities
      </a>
      <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out">
        Support
      </a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full"
            src="https://randomuser.me/api/portraits/men/32.jpg"
            alt="User Avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-gray-800 dark:text-gray-100">John Doe</div>
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-100 transition duration-300 ease-in-out">
          Your Profile
        </a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-100 transition duration-300 ease-in-out">
          Settings
        </a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-100 transition duration-300 ease-in-out">
          Sign out
        </a>
      </div>
    </div>
  </div>
</nav>

Gradient_Corporate_Blues_Navigation_Component

非営利団体/慈善団体のWebサイト向けに設計された複雑で応答性の高いナビゲーションコンポーネントで、企業の青のグラデーショントーン、スムーズなトランジション、ダークモードのサポートが特徴です。ロゴ、ナビゲーションリンク、コールトゥアクションボタン、モバイルメニューが含まれています。

開けるプレビュー

                <nav class="bg-gradient-to-r from-blue-600 to-blue-800 dark:from-gray-900 dark:to-blue-950 p-4 shadow-lg transition-colors duration-500">
  <div class="container mx-auto flex items-center justify-between flex-wrap">
    <!-- Logo -->
    <a href="#" class="flex items-center flex-shrink-0 text-white mr-6">
      <svg class="fill-current h-8 w-8 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
      </svg>
      <span class="font-semibold text-xl tracking-tight">CharityName</span>
    </a>

    <!-- Mobile menu button -->
    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50" aria-label="Toggle navigation">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>

    <!-- Navigation Links & CTA -->
    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300 ease-in-out" id="navbar-content">
      <div class="text-sm lg:flex-grow">
        <a href="#programs" class="block mt-4 lg:inline-block lg:mt-0 text-blue-100 hover:text-white mr-4 transition-colors duration-300 ease-in-out hover:underline">
          Our Programs
        </a>
        <a href="#about" class="block mt-4 lg:inline-block lg:mt-0 text-blue-100 hover:text-white mr-4 transition-colors duration-300 ease-in-out hover:underline">
          About Us
        </a>
        <a href="#impact" class="block mt-4 lg:inline-block lg:mt-0 text-blue-100 hover:text-white mr-4 transition-colors duration-300 ease-in-out hover:underline">
          Our Impact
        </a>
        <a href="#news" class="block mt-4 lg:inline-block lg:mt-0 text-blue-100 hover:text-white transition-colors duration-300 ease-in-out hover:underline">
          News & Updates
        </a>
      </div>
      <div class="mt-4 lg:mt-0">
        <a href="#donate" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-blue-800 dark:hover:text-gray-900 hover:bg-white transition-all duration-300 ease-in-out">
          Donate Now
        </a>
      </div>
    </div>
  </div>
</nav>

<!-- Script to toggle mobile menu (optional, can be done with Alpine.js or vanilla JS if allowed) -->
<!-- For this request, we are strictly HTML/CSS, so the mobile menu toggle would require a small JS snippet if interactivity is mandatory. Without JS, the 'hidden' class always applies. -->
<!-- For a pure HTML/CSS solution, one might consider using CSS :target or a checkbox hack, but it's generally less robust than JS for navigations. -->
<!-- Given the 'complex' and 'interactive' brief, a small JS snippet is usually implied for functionality beyond hover/active. -->
<!-- As per requirements, 'no JavaScript' is enforced, so this component will *not* have a functional mobile toggle in its current HTML/CSS state. -->
<!-- The 'hidden' class on the #navbar-content will mean it's invisible on small screens. Manual addition/removal of 'hidden' required for testing responsive view. -->

3D_Vibrant_Simple_Job_Career_Navigation

シンプルで鮮やか、応答性に優れたナビゲーションコンポーネントで、微妙な3D効果があり、求人掲示板やキャリア開発プラットフォーム向けに設計されています。ダークモードのサポートが含まれています。

開けるプレビュー

                <nav class="bg-gradient-to-r from-purple-500 to-indigo-600 dark:from-gray-800 dark:to-gray-900 shadow-xl relative z-10">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
    <div class="flex items-center justify-between h-16">
      <div class="flex-shrink-0">
        <a href="#" class="text-white text-3xl font-extrabold tracking-tight relative">
          <span class="relative block px-1 pb-1 transform -skew-x-6 bg-yellow-400 dark:bg-teal-500 rounded-lg shadow-md hover:scale-105 transition duration-300 ease-in-out">
            <span class="block transform skew-x-6 text-indigo-800 dark:text-gray-900">JOB<span class="text-purple-700 dark:text-gray-200">HUB</span></span>
          </span>
          <span class="absolute top-1 left-1 block w-full h-full bg-blue-600 dark:bg-gray-700 rounded-lg filter blur-sm opacity-50 -z-10"></span>
        </a>
      </div>
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-6">
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Find Jobs
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-red-600 dark:bg-red-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Companies
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-green-600 dark:bg-green-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Careers
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-blue-600 dark:bg-blue-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
          <a href="#" class="relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-lg font-semibold transform hover:scale-105 transition duration-300 ease-in-out group">
            Post Job
            <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-orange-600 dark:bg-orange-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
          </a>
        </div>
      </div>

      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-yellow-200 hover:text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-purple-800 focus:ring-white dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <svg class="block h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <svg class="hidden h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 animate-slide-down delay-150 duration-500 ease-out">
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Find Jobs
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-red-600 dark:bg-red-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Companies
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-green-600 dark:bg-green-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Careers
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-blue-600 dark:bg-blue-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
      <a href="#" class="block relative text-white hover:text-yellow-300 dark:hover:text-teal-300 px-3 py-2 rounded-md text-base font-medium transform hover:scale-105 transition duration-300 ease-in-out group">
        Post Job
        <span class="absolute inset-0 block rounded-md transform -skew-x-6 bg-orange-600 dark:bg-orange-800 opacity-20 group-hover:opacity-40 transition-opacity duration-300"></span>
      </a>
    </div>
  </div>
</nav>

Luxury_SaaS_Navigation_Candy

SaaSアプリケーション向けのラグジュアリー/プレミアムスタイルのナビゲーションコンポーネントで、キャンディーをテーマにした配色(バブルガムピンク、ミントグリーン)と洗練されたタイポグラフィが特徴です。レスポンシブで、ダークモードのサポートが含まれており、インタラクティブな要素があります。

開けるプレビュー

                <nav class="relative bg-white dark:bg-gray-900 shadow-lg font-['Quicksand',_sans-serif]" x-data="{ open: false }">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-pink-500 dark:text-pink-400 text-3xl font-extrabold tracking-tight">
            SaaS<span class="text-teal-400 dark:text-teal-300">Flow</span>
          </a>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8 items-center">
          <a href="#" class="border-b-2 border-transparent hover:border-pink-300 dark:hover:border-pink-500 text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Features</a>
          <a href="#" class="border-b-2 border-transparent hover:border-teal-300 dark:hover:border-teal-500 text-gray-700 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Pricing</a>
          <a href="#" class="border-b-2 border-transparent hover:border-pink-300 dark:hover:border-pink-500 text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Solutions</a>
          <a href="#" class="border-b-2 border-transparent hover:border-teal-300 dark:hover:border-teal-500 text-gray-700 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Contact</a>
        </div>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:items-center">
        <button class="p-2 rounded-full text-pink-400 dark:text-pink-300 hover:text-pink-600 dark:hover:text-pink-500 hover:bg-pink-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>
        <button x-on:click="$store.darkMode.toggle()" class="ml-4 p-2 rounded-full text-teal-400 dark:text-teal-300 hover:text-teal-600 dark:hover:text-teal-500 hover:bg-teal-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out">
          <span class="sr-only">Toggle dark mode</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path x-show="$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.575l.707-.707M6.025 18.025l-.707.707M18.025 6.025l.707-.707M6.025 6.025l-.707-.707M12 7a5 5 0 110 10 5 5 0 010-10z" />
            <path x-show="!$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>
        <button type="button" class="ml-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-500 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition duration-300 ease-in-out">
          Sign Up
        </button>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button x-on:click="open = !open" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 transition duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg x-show="!open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg x-show="open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div x-show="open" x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="sm:hidden absolute inset-x-0 top-full z-10 bg-white dark:bg-gray-900 shadow-md transform origin-top-right" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-pink-50 dark:hover:bg-gray-800 hover:text-pink-500 dark:hover:text-pink-400 transition duration-300 ease-in-out">Features</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-gray-800 hover:text-teal-500 dark:hover:text-teal-400 transition duration-300 ease-in-out">Pricing</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-pink-50 dark:hover:bg-gray-800 hover:text-pink-500 dark:hover:text-pink-400 transition duration-300 ease-in-out">Solutions</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-gray-800 hover:text-teal-500 dark:hover:text-teal-400 transition duration-300 ease-in-out">Contact</a>
      <div class="flex items-center justify-between px-3 py-2">
        <button class="flex-shrink-0 p-2 rounded-full text-pink-400 dark:text-pink-300 hover:text-pink-600 dark:hover:text-pink-500 hover:bg-pink-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>
        <button x-on:click="$store.darkMode.toggle()" class="ml-4 flex-shrink-0 p-2 rounded-full text-teal-400 dark:text-teal-300 hover:text-teal-600 dark:hover:text-teal-500 hover:bg-teal-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path x-show="$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.575l.707-.707M6.025 18.025l-.707.707M18.025 6.025l.707-.707M6.025 6.025l-.707-.707M12 7a5 5 0 110 10 5 5 0 010-10z" />
            <path x-show="!$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>
      </div>
      <a href="#" class="block w-full text-center px-4 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-500 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition duration-300 ease-in-out mt-4 mx-3">Sign Up</a>
    </div>
  </div>
</nav>
<script>
  // This Alpine.js store provides dark mode functionality.
  // It's a simple example and can be extended for persistence.
  
  // Required for Alpine.js to function
  document.addEventListener('alpine:init', () => {
    Alpine.store('darkMode', {
      on: localStorage.getItem('darkMode') === 'true' || (localStorage.getItem('darkMode') === null && window.matchMedia('(prefers-color-scheme: dark)').matches),
      toggle() {
        this.on = !this.on;
        localStorage.setItem('darkMode', this.on);
        document.documentElement.classList.toggle('dark', this.on);
      }
    });

    // Initialize dark mode class on html tag based on store value
    Alpine.effect(() => {
      if (Alpine.store('darkMode').on) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    });
  });
</script>

ニューモーフィックナビゲーションバー

デート/ソーシャルプラットフォーム用に設計されたシンプルでレスポンシブなニューモルフィックナビゲーションバーで、ダークモードをサポートするフォレスト/グリーンのカラーパレットを使用しています。

開けるプレビュー

                <nav class="p-4 bg-lime-100 dark:bg-emerald-900 shadow-neumorphic-light dark:shadow-neumorphic-dark flex flex-col md:flex-row justify-between items-center rounded-2xl max-w-7xl mx-auto my-8">
  <div class="flex items-center space-x-2 mb-4 md:mb-0">
    <svg class="w-8 h-8 text-emerald-700 dark:text-lime-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
    </svg>
    <span class="text-2xl font-bold text-emerald-800 dark:text-lime-200 font-serif">LoveLink</span>
  </div>
  <ul class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-lg font-medium text-emerald-700 dark:text-lime-300">
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Discover
      </a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Messages
      </a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Profile
      </a>
    </li>
    <li>
      <a href="#" class="block py-2 px-4 rounded-xl transition-all duration-300 ease-in-out
        shadow-neumorphic-inner-light hover:shadow-neumorphic-outer-light
        dark:shadow-neumorphic-inner-dark dark:hover:shadow-neumorphic-outer-dark
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50
        text-emerald-700 dark:text-lime-300 hover:text-emerald-900 dark:hover:text-lime-100">
        Settings
      </a>
    </li>
  </ul>
</nav>

<style>
  /* Neumorphic Shadows - You would typically configure these in your tailwind.config.js */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #104e3b, -6px -6px 12px #268a6f;
  }

  .shadow-neumorphic-inner-light {
    box-shadow: inset 3px 3px 6px #9acd32, inset -3px -3px 6px #e0ffe0;
  }
  .dark .shadow-neumorphic-inner-dark {
    box-shadow: inset 3px 3px 6px #104e3b, inset -3px -3px 6px #268a6f;
  }

  .shadow-neumorphic-outer-light {
    box-shadow: 6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0;
  }
  .dark .shadow-neumorphic-outer-dark {
    box-shadow: 6px 6px 12px #104e3b, -6px -6px 12px #268a6f;
  }

  /* You'd add these custom styles to your tailwind.config.js extends section for shadows. */
  /* Example tailwind.config.js snippet: */
  /*
  module.exports = {
    theme: {
      extend: {
        colors: {
          'lime-100': '#f0fff0',
          'emerald-900': '#1a5f4a',
          'emerald-700': '#047857',
          'emerald-800': '#065f46',
          'lime-200': '#d9f99d',
          'lime-300': '#bef264',
          'emerald-500': '#10b981',
        },
        boxShadow: {
          'neumorphic-light': '6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0',
          'neumorphic-dark': '6px 6px 12px #104e3b, -6px -6px 12px #268a6f',
          'neumorphic-inner-light': 'inset 3px 3px 6px #9acd32, inset -3px -3px 6px #e0ffe0',
          'neumorphic-inner-dark': 'inset 3px 3px 6px #104e3b, inset -3px -3px 6px #268a6f',
          'neumorphic-outer-light': '6px 6px 12px #9acd32, -6px -6px 12px #e0ffe0',
          'neumorphic-outer-dark': '6px 6px 12px #104e3b, -6px -6px 12px #268a6f',
        }
      }
    },
    plugins: [],
  }
  */
</style>

バウハウスジュエルトーンナビゲーション

幾何学的なフォルムと宝石のような色調のシンプルで機能的なナビゲーションコンポーネントで、予約/予約システム用に設計されています。応答性とダークモードのサポートを備えています。

開けるプレビュー

                <nav class="bg-emerald-600 dark:bg-sapphire-900 p-4 shadow-lg">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <!-- Logo/Brand Section -->
    <div class="flex items-center mb-4 md:mb-0">
      <div class="w-8 h-8 bg-ruby-500 dark:bg-ruby-700 mr-2 transform rotate-45"></div>
      <a href="#" class="text-white text-2xl font-bold tracking-widest uppercase">Reserv<span class="text-ruby-300 dark:text-ruby-500">.</span></a>
    </div>

    <!-- Navigation Links -->
    <div class="relative flex flex-col md:flex-row items-center w-full md:w-auto">
      <!-- Mobile Menu Button (Hamburger) -->
      <button id="navbar-toggle" class="md:hidden absolute top-0 right-0 mr-4 text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-label="Toggle navigation">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>

      <ul id="navbar-menu" class="hidden md:flex flex-col md:flex-row md:space-x-8 mt-4 md:mt-0 w-full md:w-auto text-center md:text-left">
        <li>
          <a href="#" class="block py-2 px-4 text-white hover:text-ruby-300 dark:hover:text-ruby-500 uppercase font-medium transition duration-300 ease-in-out border-b-2 border-transparent hover:border-ruby-300 dark:hover:border-ruby-500">
            Home
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-4 text-white hover:text-ruby-300 dark:hover:text-ruby-500 uppercase font-medium transition duration-300 ease-in-out border-b-2 border-transparent hover:border-ruby-300 dark:hover:border-ruby-500">
            Services
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-4 text-white hover:text-ruby-300 dark:hover:text-ruby-500 uppercase font-medium transition duration-300 ease-in-out border-b-2 border-transparent hover:border-ruby-300 dark:hover:border-ruby-500">
            About Us
          </a>
        </li>
      </ul>
    </div>

    <!-- Action Button -->
    <div class="mt-4 md:mt-0">
      <a href="#" class="inline-block px-6 py-2 bg-ruby-500 hover:bg-ruby-400 dark:bg-ruby-700 dark:hover:bg-ruby-600 text-white font-bold uppercase tracking-wider rounded-md transition duration-300 ease-in-out transform hover:scale-105 border-2 border-ruby-500 dark:border-ruby-700">
        Book Now
      </a>
    </div>
  </div>
  <script>
    // Simple JavaScript for mobile menu toggle
    document.addEventListener('DOMContentLoaded', function () {
      const navbarToggle = document.getElementById('navbar-toggle');
      const navbarMenu = document.getElementById('navbar-menu');

      navbarToggle.addEventListener('click', function () {
        navbarMenu.classList.toggle('hidden');
        navbarMenu.classList.toggle('flex');
        navbarMenu.classList.toggle('flex-col');
      });

      // Close menu when a link is clicked (for mobile)
      navbarMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          if (window.innerWidth < 768) { // md breakpoint
            navbarMenu.classList.add('hidden');
            navbarMenu.classList.remove('flex');
            navbarMenu.classList.remove('flex-col');
          }
        });
      });

      // Close menu on resize if above mobile breakpoint
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) {
          navbarMenu.classList.remove('hidden');
          navbarMenu.classList.remove('flex');
          navbarMenu.classList.remove('flex-col');
        } else {
          navbarMenu.classList.add('hidden'); // Ensure it's hidden on mobile if resized from desktop
          navbarMenu.classList.remove('flex');
          navbarMenu.classList.remove('flex-col');
        }
      });
    });
  </script>
  <style>
    /* Custom tailwind color for dark mode (replace with actual tailwind.config.js extension) */
    .bg-sapphire-900 {
      background-color: #0A0A2A; /* Darker blue reminiscent of sapphire */
    }
    .text-sapphire-900 {
      color: #0A0A2A;
    }
    .bg-ruby-500 {
      background-color: #CC0033;
    }
    .hover\:bg-ruby-400:hover {
      background-color: #E6003D;
    }
    .dark\:bg-ruby-700 {
      background-color: #990022;
    }
    .dark\:hover\:bg-ruby-600:hover {
      background-color: #B30028;
    }
    .text-ruby-300 {
      color: #FF5C83;
    }
    .dark\:text-ruby-500 {
      color: #CC0033;
    }
    .hover\:text-ruby-300:hover {
      color: #FF5C83;
    }
    .dark\:hover\:text-ruby-500:hover {
      color: #CC0033;
    }
    .hover\:border-ruby-300:hover {
      border-color: #FF5C83;
    }
    .dark\:hover\:border-ruby-500:hover {
      border-color: #CC0033;
    }
    .border-ruby-500 {
      border-color: #CC0033;
    }
    .dark\:border-ruby-700 {
      border-color: #990022;
    }

    /* Primary Emerald for background */
    .bg-emerald-600 {
      background-color: #008060; 
    }
  </style>
</nav>