検索コンポーネント

カテゴリ

コンポーネントスティッキーナビゲーション

スティッキーナビゲーション

スクロール時に表示されたままのナビゲーション

サイバーパンクスティッキーナビゲーション

サイバーパンクスタイルの応答性があり、粘着性のあるナビゲーションバーで、夕焼け/温かみのある色調が特徴で、金融/銀行のインターフェースに適しています。ダークモードのサポートとインタラクティブな要素が含まれています。

                <header class="w-full sticky top-0 z-50 transition-all duration-300 backdrop-blur-sm bg-gradient-to-r from-orange-600/80 to-red-700/80 dark:from-gray-900/90 dark:to-black/90 shadow-lg dark:shadow-xl dark:shadow-fuchsia-700/30">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-yellow-300 dark:text-fuchsia-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 14.121a3 3 0 114.243 4.243L14.828 20.97a4 4 0 01-5.656 0L4.121 16.879a3 3 0 014.243-4.243m.86-10.428e-5L12 5m-2 4a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      <a href="#" class="text-2xl font-extrabold text-white tracking-widest uppercase filter drop-shadow-md text-shadow-neon-orange dark:text-fuchsia-400 dark:text-shadow-neon-purple">SynthBank</a>
    </div>

    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Accounts
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Investments
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Loans
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
      <a href="#" class="text-white hover:text-yellow-300 px-3 py-2 rounded-md font-medium text-lg transition-colors duration-300 relative group dark:text-fuchsia-300 dark:hover:text-cyan-400">
        Support
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-yellow-300 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left dark:bg-cyan-400"></span>
      </a>
    </div>

    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-yellow-300 text-orange-800 hover:bg-yellow-400 transition-colors duration-300 dark:bg-fuchsia-600 dark:text-white dark:hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-orange-600 dark:focus:ring-fuchsia-500 dark:focus:ring-offset-gray-900">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 01d 3v1" />
        </svg>
      </button>
      <button class="md:hidden p-2 rounded-md text-white hover:bg-white/10 transition-colors duration-300 dark:text-fuchsia-300 dark:hover:bg-fuchsia-900/50 focus:outline-none focus:ring-2 focus:ring-yellow-300 dark:focus:ring-fuchsia-500">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu (hidden by default) -->
  <div class="md:hidden origin-top transition-all duration-300 ease-out max-h-0 overflow-hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col items-start">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Accounts</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Investments</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Loans</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-orange-500 dark:text-fuchsia-300 dark:hover:bg-fuchsia-800 transition-colors duration-200">Support</a>
    </div>
  </div>
</header>

<style>
  /* This is a simple CSS workaround for the neon text effect if not using a utility class */
  /* For a more robust solution, consider a custom Tailwind plugin for text-shadow-neon */
  .text-shadow-neon-orange {
    text-shadow: 0 0 5px rgba(255, 140, 0, 0.7),
                 0 0 10px rgba(255, 165, 0, 0.5),
                 0 0 20px rgba(255, 165, 0, 0.3);
  }
  .dark .text-shadow-neon-purple {
    text-shadow: 0 0 5px rgba(220, 38, 203, 0.7),
                 0 0 10px rgba(236, 72, 153, 0.5),
                 0 0 20px rgba(244, 114, 182, 0.3);
  }
</style>

<script>
  // Basic JavaScript for mobile menu toggle (required for interactive features).
  // Tailwind CSS alone cannot handle toggling classes based on user interaction directly.
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.querySelector('button[aria-controls="mobile-menu"]');
    const mobileMenu = document.getElementById('mobile-menu');

    if (menuButton && mobileMenu) {
      menuButton.addEventListener('click', () => {
        const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
        menuButton.setAttribute('aria-expanded', !isExpanded);
        if (isExpanded) {
          mobileMenu.style.maxHeight = '0px';
        } else {
          mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
        }
      });
    }
  });
</script>

スティッキーナビゲーションコンポーネント

ネオン/グロー効果を備えたレスポンシブでスティッキーなナビゲーションバーで、教育や学習プラットフォームに適しています。紫/紫の配色、ダークモードのサポート、インタラクティブメニューアイテムを備えています。

開けるプレビュー

                <header class="sticky top-0 z-50 bg-gradient-to-r from-purple-900 to-indigo-900 shadow-lg dark:bg-gradient-to-r dark:from-gray-900 dark:to-black backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-purple-300 drop-shadow-[0_0_5px_rgba(192,132,252,0.8)] dark:text-purple-500 dark:drop-shadow-[0_0_8px_rgba(168,85,247,0.9)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
      </svg>
      <a href="#" class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-300 drop-shadow-[0_0_8px_rgba(233,213,255,0.7)] dark:from-purple-400 dark:to-white dark:drop-shadow-[0_0_10px_rgba(255,255,255,0.8)]">
        EduGlow
      </a>
    </div>

    <!-- Mobile menu button -->
    <div class="md:hidden">
      <button class="text-purple-300 hover:text-purple-100 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-2" aria-label="Toggle menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>

    <!-- Desktop menu -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Courses
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        About Us
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
      <a href="#" class="text-purple-200 hover:text-purple-50 transition duration-300 ease-in-out relative group py-2">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-400 group-hover:w-full transition-all duration-300 ease-out glow-effect"></span>
      </a>
    </div>

    <!-- User Actions -->
    <div class="hidden md:flex items-center space-x-4">
      <button class="px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-900 border border-purple-500
      neon-button dark:bg-purple-800 dark:hover:bg-purple-700 dark:border-purple-700 dark:focus:ring-offset-gray-900">
        Sign In
      </button>
      <img class="h-9 w-9 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md transform hover:scale-105 transition duration-300 ease-in-out cursor-pointer drop-shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    </div>
  </nav>

  <!-- Mobile menu dropdown (hidden by default, controlled by JS in a real app) -->
  <div class="md:hidden bg-purple-900 dark:bg-gray-800 py-2 border-t border-purple-800 dark:border-gray-700">
    <div class="flex flex-col space-y-2 px-4">
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Home
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Courses
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        About Us
      </a>
      <a href="#" class="block text-purple-200 hover:text-white py-2 px-3 rounded-md transition duration-300 ease-in-out border border-transparent hover:border-purple-600 dark:hover:border-purple-700 focus:ring focus:ring-purple-500 focus:outline-none">
        Contact
      </a>
      <button class="w-full text-center px-4 py-2 rounded-full text-purple-100 bg-purple-600 hover:bg-purple-700 transition duration-300 ease-in-out shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 mt-2 neon-button dark:bg-purple-800 dark:hover:bg-purple-700">
        Sign In
      </button>
      <div class="flex justify-center mt-2">
        <img class="h-10 w-10 rounded-full border-2 border-purple-400 dark:border-purple-600 shadow-md glow-border" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</header>

<style>
  /* Base for glow effects, typically handled by utilities, but for complex neon, custom CSS might be needed */
  .drop-shadow-\[0_0_5px_rgba\(192\,132\,252\,0\.8\)\] {
    filter: drop-shadow(0 0 5px rgba(192, 132, 252, 0.8));
  }

  .dark\:drop-shadow-\[0_0_8px_rgba\(168\,85\,247\,0\.9\)\] {
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.9));
  }

  .drop-shadow-\[0_0_8px_rgba\(233\,213\,255\,0\.7\)\] {
    filter: drop-shadow(0 0 8px rgba(233, 213, 255, 0.7));
  }

  .dark\:drop-shadow-\[0_0_10px_rgba\(255\,255\,255\,0\.8\)\] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  }

  .glow-effect {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.7), 0 0 12px rgba(192, 132, 252, 0.5);
    transition: all 0.3s ease-out;
    opacity: 0;
  }

  .group:hover .glow-effect {
    opacity: 1;
  }

  .neon-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.7);
  }

  .neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .neon-button:hover::before {
    left: 100%;
  }

  .neon-button:active {
    transform: translateY(1px);
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.5), inset 0 0 5px rgba(139, 92, 246, 0.3);
  }

  .glow-border {
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.8);
  }

  html.dark .glow-border {
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.9);
  }
</style>

スティッキーナビゲーションコンポーネント

天気/気候のWebサイト用のミニマリストでレスポンシブなスティッキーナビゲーションバーで、クールなニュートラルカラー、ダークモードのサポート、インタラクティブな要素を備えています。中程度の複雑さで設計されており、機能的なリンクと検索バーがあります。

開けるプレビュー

                <header class="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-900 transition-colors duration-300 ease-in-out">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap gap-4">
    <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 whitespace-nowrap tracking-tight transition-colors duration-300 ease-in-out">
      Weather<span class="text-blue-600 dark:text-blue-400">Sphere</span>
    </a>

    <div class="flex items-center gap-4 order-3 md:order-none">
      <div class="relative flex items-center">
        <input type="search" placeholder="Search city..." class="py-2 pl-10 pr-3 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 ease-in-out w-full max-w-xs md:max-w-none">
        <svg class="absolute left-3 text-gray-500 dark:text-gray-400 w-5 h-5" 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>
      <button type="button" class="p-2 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300 ease-in-out">
        <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="M12 3v1m0 16v1m9-9h1M3 12h1m15.325-7.757l-.707-.707M4.343 19.343l-.707-.707m13.414 0l.707-.707M4.343 4.343l-.707-.707"></path>
        </svg>
      </button>
    </div>

    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="cursor-pointer md:hidden text-gray-600 dark:text-gray-300 p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300 ease-in-out order-2">
      <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>
    </label>

    <div class="hidden peer-checked:block md:flex flex-col md:flex-row md:items-center gap-x-6 gap-y-2 w-full md:w-auto mt-4 md:mt-0 pb-2 md:pb-0 border-t md:border-t-0 border-gray-200 dark:border-gray-700 order-last md:order-none transition-all duration-300 ease-in-out" id="navbar-links">
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Dashboard
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Forecast
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Climate Data
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        Maps
      </a>
      <a href="#" class="block py-2 px-3 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-300 ease-in-out">
        About
      </a>
    </div>
  </nav>
</header>

スティッキーナビゲーションコンポーネント

ニュース/ジャーナリズム Web サイト用に設計されたスキューモーフィックなスティッキーナビゲーションコンポーネントで、明るいアクセントカラー、応答性、ダークモードのサポートを備えた黒と白の配色が特徴です。これは、現実世界のボタンと埋め込み型要素を模倣しています。

開けるプレビュー

                <header class="sticky top-0 z-50 py-4 shadow-skeuomorphic-light dark:shadow-skeuomorphic-dark bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <nav class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4 md:px-6 lg:px-8">
    <!-- Logo/Site Title -->
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl lg:text-3xl font-extrabold text-gray-800 dark:text-gray-100 uppercase tracking-widest leading-none">
        <span class="text-red-600 dark:text-red-500">NEWS</span>CAST
      </a>
    </div>

    <!-- Navigation Links -->
    <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 lg:space-x-6 items-center flex-grow justify-center">
      <a href="#" class="nav-button">
        <span class="button-text">Latest</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Politics</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Business</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Tech</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Sports</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Opinion</span>
      </a>
    </div>

    <!-- Search and Theme Toggle -->
    <div class="flex items-center space-x-4 mt-4 md:mt-0">
      <!-- Search Button -->
      <button class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
        <svg class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200" 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>
        <span class="sr-only">Search</span>
      </button>

      <!-- Theme Toggle Button -->
      <button id="theme-toggle" class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
        <!-- Moon icon for light mode (default) -->
        <svg id="theme-toggle-dark-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
        </svg>
        <!-- Sun icon for dark mode -->
        <svg id="theme-toggle-light-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.121-7.778l.707-.707a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414zM4 10a1 1 0 01-1 1H2a1 1 0 110-2h1a1 1 0 011 1zm3.657 5.657l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM10 18a1 1 0 01-1 1v1a1 1 0 112 0v-1a1 1 0 01-1-1zm-4.95-2.121l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zm-2.121-7.778l-.707-.707a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414z"></path>
        </svg>
        <span class="sr-only">Toggle theme</span>
      </button>
    </div>
  </nav>
</header>

<!-- Placeholder Content to Demonstrate Stickiness and give page height for scrolling -->
<div class="h-[1200px] bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-8 flex items-center justify-center">
  <p class="text-4xl font-light opacity-30">Scroll down to see the sticky header in action.</p>
</div>

<style>
  /* Skeuomorphic styles using custom properties for easy theme switching */
  .shadow-skeuomorphic-light {
    box-shadow: 
      inset 2px 2px 5px rgba(255, 255, 255, 0.7),
      inset -3px -3px 8px rgba(0, 0, 0, 0.2),
      5px 5px 15px rgba(0, 0, 0, 0.1), 
      -5px -5px 15px rgba(255, 255, 255, 0.8);
  }

  .dark .shadow-skeuomorphic-light, html.dark .shadow-skeuomorphic-light {
     box-shadow: none; /* Remove light shadows in dark mode */
  }

  .shadow-skeuomorphic-dark {
    box-shadow: 
      inset 5px 5px 10px rgba(0, 0, 0, 0.4),
      inset -5px -5px 10px rgba(255, 255, 255, 0.05),
      5px 5px 15px rgba(0, 0, 0, 0.4),
      -5px -5px 15px rgba(255, 255, 255, 0.08);
  }

  .light .shadow-skeuomorphic-dark, html.light .shadow-skeuomorphic-dark {
    box-shadow: none; /* Remove dark shadows in light mode */
  }

  /* Nav Button Base */
  .nav-button {
    @apply relative flex items-center justify-center px-4 py-2 text-sm font-medium rounded-full shadow-skeuomorphic-button-light dark:shadow-skeuomorphic-button-dark transition-all duration-200;
    @apply bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-950;
  }

  /* Nav Button Text */
  .nav-button .button-text {
    @apply text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200;
  }

  /* Nav Button Hover/Active State */
  .nav-button:hover {
    @apply text-red-600 dark:text-red-500;
    @apply shadow-skeuomorphic-button-inset-light dark:shadow-skeuomorphic-button-inset-dark;
    @apply bg-gradient-to-tr from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900;
  }

  .shadow-skeuomorphic-button-light {
    box-shadow: 
      3px 3px 6px rgba(0, 0, 0, 0.1),
      -3px -3px 6px rgba(255, 255, 255, 0.6);
  }

  .shadow-skeuomorphic-button-dark {
    box-shadow: 
      3px 3px 6px rgba(0, 0, 0, 0.6),
      -3px -3px 6px rgba(255, 255, 255, 0.08);
  }

  .shadow-skeuomorphic-button-inset-light {
    box-shadow:
      inset 2px 2px 5px rgba(0, 0, 0, 0.15),
      inset -2px -2px 5px rgba(255, 255, 255, 0.7);
  }

  .shadow-skeuomorphic-button-inset-dark {
    box-shadow:
      inset 3px 3px 7px rgba(0, 0, 0, 0.8),
      inset -3px -3px 7px rgba(255, 255, 255, 0.05);
  }

  /* Media queries for responsiveness of buttons within the grid */
  @media (min-width: 768px) {
    .md\:flex-row > .nav-button {
      padding-left: 1rem; /* px-4 */
      padding-right: 1rem; /* px-4 */
    }
  }
  @media (min-width: 1024px) {
    .lg\:space-x-6 > .nav-button {
      margin-left: 1.5rem; /* space-x-6 */
      margin-right: 0; /* Override default margin from flex-row */
    }
    .lg\:space-x-6 > .nav-button + .nav-button {
      margin-left: 1.5rem; /* Re-apply margin between siblings */
    }
  }

</style>

<script>
  // Simple JS for theme toggle (Tailwind doesn't handle this automatically)
  document.addEventListener('DOMContentLoaded', () => {
    const themeToggleBtn = document.getElementById('theme-toggle');
    const htmlElement = document.documentElement;

    // Function to set theme based on localStorage or system preference
    const setTheme = (theme) => {
      if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        htmlElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      } else {
        htmlElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      }
    };

    // Initial theme setting
    setTheme(localStorage.getItem('theme'));

    // Toggle theme on button click
    themeToggleBtn.addEventListener('click', () => {
      if (htmlElement.classList.contains('dark')) {
        setTheme('light');
      } else {
        setTheme('dark');
      }
    });
  });
</script>

スティッキーナビゲーションコンポーネント

企業やイベントのWebサイトに適した、すっきりとした信頼できるシンプルなスティッキーナビゲーションバー。明るいアクセントカラー、完全な応答性、ダークモードのサポートを備えた黒と白のモノクロが特徴です。

開けるプレビュー

                <header class="bg-white shadow-md dark:bg-gray-800 sticky top-0 z-50">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white flex items-center space-x-2">
      <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5M10 2L3 6v10l7 4 7-4V6l-7-4zm0 0a2 2 0 100 4 2 2 0 000-4z" />
      </svg>
      <span>EventName</span>
    </a>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Schedule</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Speakers</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Venue</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Sponsors</a>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 border border-indigo-600 dark:border-indigo-400 px-5 py-2 rounded-lg font-semibold hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-400 dark:hover:text-gray-900 transition duration-300 ease-in-out">Register</a>
    </div>

    <div class="md:hidden">
      <button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:text-gray-700 dark:focus:text-white" aria-label="Toggle menu">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>
</header>

スティッキーナビゲーションコンポーネント

シンプルでクリーン、高コントラストのスティッキーナビゲーションバーは、モノスペース/開発者の美学を備えており、エンターテインメントやメディアプラットフォームに適しています。

開けるプレビュー

                <nav class="bg-gray-900 dark:bg-black text-lime-400 font-mono fixed w-full top-0 z-50 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M4 8h16M4 16h16" />
      </svg>
      <span class="text-xl font-bold uppercase tracking-wider">CodeStream</span>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="hover:text-white transition duration-300">Discover</a>
      <a href="#" class="hover:text-white transition duration-300">Browse</a>
      <a href="#" class="hover:text-white transition duration-300">Live</a>
      <a href="#" class="hover:text-white transition duration-300">Community</a>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-lime-400 focus:outline-none focus:text-white">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation (hidden by default, would be toggled by JS) -->
  <div class="hidden md:hidden bg-gray-800 dark:bg-gray-950 pb-2">
    <div class="flex flex-col items-center space-y-2 py-2">
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Discover</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Browse</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Live</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Community</a>
    </div>
  </div>
</nav>

Retro_Vintage_Sticky_Navigation_Component

イベントやカンファレンスのウェブサイト向けにデザインされた、レトロでビンテージ風の複雑でスティッキーなナビゲーションバーで、ソフトなパステルカラーの配色、完全な応答性、ダークモードのサポートが特徴です。ロゴ、ナビゲーションリンク、コールトゥアクションボタン、検索アイコンが含まれています。

開けるプレビュー

                <header class="sticky top-0 z-50 w-full bg-pink-100/90 backdrop-blur-sm shadow-md transition-colors duration-300 dark:bg-zinc-800/90">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between font-mono text-pink-700 dark:text-pink-300">
    <div class="flex items-center space-x-4">
      <!-- Logo / Event Title -->
      <a href="#" class="text-2xl font-bold tracking-tight uppercase group dark:text-pink-100">
        <span class="block transform -rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-600 dark:text-pink-200">Future</span>
        <span class="block transform rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-800 dark:text-pink-400">Fest '92</span>
      </a>
    </div>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden">
      <button id="mobile-menu-button" class="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400">
        <svg class="w-7 h-7 text-pink-700 dark:text-pink-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 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation & CTA -->
    <div class="hidden lg:flex items-center space-x-8">
      <ul class="flex space-x-6 text-lg">
        <li><a href="#schedule" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Schedule
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#speakers" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Speakers
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#tickets" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Tickets
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#venue" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Venue
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#faq" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          FAQ
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
      </ul>
      <a href="#buytickets" class="px-6 py-2 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
        <span class="inline-block transform skew-x-12">Get Tickets!</span>
      </a>
      <button class="p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
        <svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500" 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>
    </div>
  </nav>

  <!-- Mobile Menu (hidden by default) -->
  <div id="mobile-menu" class="hidden lg:hidden bg-pink-50 dark:bg-zinc-700 px-4 py-4 border-t border-pink-200 dark:border-zinc-600 text-center font-mono">
    <ul class="flex flex-col space-y-4 text-lg text-pink-700 dark:text-pink-300">
      <li><a href="#schedule" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Schedule</a></li>
      <li><a href="#speakers" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Speakers</a></li>
      <li><a href="#tickets" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Tickets</a></li>
      <li><a href="#venue" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Venue</a></li>
      <li><a href="#faq" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">FAQ</a></li>
    </ul>
    <a href="#buytickets" class="mt-6 inline-block w-full max-w-xs px-6 py-3 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
      <span class="inline-block transform skew-x-12">Get Tickets!</span>
    </a>
    <button class="mt-4 p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
      <svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500 mx-auto" 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>
  </div>
</header>

<script>
  // Basic JavaScript for mobile menu toggle (required for interaction)
  document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
      });

      // Close mobile menu when a link is clicked
      const menuLinks = mobileMenu.querySelectorAll('a');
      menuLinks.forEach(link => {
        link.addEventListener('click', function() {
          mobileMenu.classList.add('hidden');
        });
      });
    }
  });
</script>

スティッキーナビゲーションコンポーネント - ニューモルフィックパステル

Neumorphism デザインスタイルとパステル調の配色を備えた複雑で粘着性のあるナビゲーションコンポーネントで、ドキュメントや Wiki サイトに適しています。ネストされたナビゲーションアイテム、検索バー、ダークモードのサポートを備えており、すべてHTMLとTailwind CSSで実装されており、完全な応答性を実現しています。

開けるプレビュー

                <header class="sticky top-0 z-50 bg-gray-100 p-4 shadow-xl dark:bg-gray-800 transition-colors duration-300 md:px-8">
  <nav class="container mx-auto flex items-center justify-between flex-wrap">
    <div class="flex items-center flex-shrink-0 text-gray-800 dark:text-gray-200 mr-6">
      <a href="#" class="font-bold text-2xl tracking-tight text-pink-500 dark:text-purple-400 drop-shadow-md">Doc<span class="text-blue-400 dark:text-teal-300">Wiki</span></a>
    </div>

    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-400 hover:text-gray-900 hover:border-gray-900 dark:text-gray-400 dark:border-gray-500 dark:hover:text-gray-100 dark:hover:border-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 group">
        <svg class="fill-current h-3 w-3 group-hover:text-blue-500 dark:group-hover:text-teal-400" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>

    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300 ease-in-out" id="navbar-collapse">
      <ul class="text-sm lg:flex-grow lg:flex lg:justify-end lg:items-center">
        <li class="relative group lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
            tabindex="0">
            Features
            <svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-200" 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="M19 9l-7 7-7-7"></path>
            </svg>
          </a>
          <div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Overview</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">API Reference</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-teal-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Integrations</a>
          </div>
        </li>
        <li class="relative group lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark"
            tabindex="0">
            Guides
            <svg class="h-4 w-4 inline-block ml-1 group-hover:rotate-180 transition-transform duration-200" 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="M19 9l-7 7-7-7"></path>
            </svg>
          </a>
          <div class="lg:absolute lg:top-full lg:left-0 lg:w-48 bg-gray-100 dark:bg-gray-700 rounded-xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl mt-2 lg:mt-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform lg:origin-top-left scale-y-75 group-hover:scale-y-100">
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Getting Started</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Best Practices</a>
            <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-pink-100 dark:hover:bg-purple-700 rounded-lg transition-colors duration-200 shadow-sm active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">Troubleshooting</a>
          </div>
        </li>
        <li class="lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
            Community
          </a>
        </li>
        <li class="lg:mr-6 mt-4 lg:mt-0">
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-teal-400 transition-colors duration-200 font-semibold py-2 px-3 rounded-xl 
            shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm 
            active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark">
            Blog
          </a>
        </li>
      </ul>
      <div class="mt-4 lg:mt-0 flex items-center">
        <div class="relative w-full lg:max-w-xs">
          <input type="search" placeholder="Search..." class="block w-full pl-10 pr-4 py-2 rounded-full text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 border-none 
            shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
            focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-teal-500 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400">
          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400">
            <svg class="h-5 w-5" 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>
        <button class="ml-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 
          shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md 
          active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark 
          hover:text-blue-500 dark:hover:text-teal-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 transition-all duration-200">
          <svg class="h-5 w-5" 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="M12 3v1m0 16v1m9-9h1M3 12H2m8.058-9.058l1.414-1.414M12.942 21.058l-1.414 1.414M21.058 12.942l-1.414 1.414M2.942 11.058l1.414-1.414M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"></path></svg>
          <span class="sr-only">Toggle Dark Mode</span>
        </button>
        <a href="#" class="ml-4 p-1 rounded-full 
          shadow-neumorphic-light-md dark:shadow-neumorphic-dark-md 
          active:shadow-neumorphic-inset-light dark:active:shadow-neumorphic-inset-dark 
          transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400">
          <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <span class="sr-only">User Profile</span>
        </a>
      </div>
    </div>
  </nav>
</header>

<style>
  /* Base light neumorphic shadows */
  .shadow-neumorphic-light-sm {
    box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
  }
  .shadow-neumorphic-light-md {
    box-shadow: 5px 5px 10px #b8b8b8, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-light-xl {
    box-shadow: 10px 10px 20px #b8b8b8, -10px -10px 20px #ffffff;
  }

  /* Inset light neumorphic shadows */
  .shadow-neumorphic-inset-light {
    box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
  }

  /* Base dark neumorphic shadows */
  .dark .shadow-neumorphic-dark-sm {
    box-shadow: 3px 3px 6px #4d4d4d, -3px -3px 6px #2d2d2d;
  }
  .dark .shadow-neumorphic-dark-md {
    box-shadow: 5px 5px 10px #4d4d4d, -5px -5px 10px #2d2d2d;
  }
  .dark .shadow-neumorphic-dark-xl {
    box-shadow: 10px 10px 20px #4d4d4d, -10px -10px 20px #2d2d2d;
  }

  /* Inset dark neumorphic shadows */
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 3px 3px 6px #4d4d4d, inset -3px -3px 6px #2d2d2d;
  }

  /* Override Tailwind shadow for header shadow-xl */
  .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .dark .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  }

  /* Hamburger menu JS to toggle content */
  @media (max-width: 1023px) {
    .lg\:hidden + div {
      display: none;
    }
    .lg\:hidden + div.active {
      display: block;
    }
  }

  /* Simple JS for mobile menu and dark mode toggle */
  document.addEventListener('DOMContentLoaded', () => {
    const menuButton = document.querySelector('.lg\:hidden button');
    const navCollapse = document.getElementById('navbar-collapse');
    const darkModeToggle = document.querySelector('button[aria-label="Toggle Dark Mode"]');

    // Mobile menu toggle
    if (menuButton && navCollapse) {
      menuButton.addEventListener('click', () => {
        navCollapse.classList.toggle('hidden');
        if (!navCollapse.classList.contains('hidden')) {
          navCollapse.classList.add('active'); // Add active for custom CSS display
        } else {
          navCollapse.classList.remove('active');
        }
      });
    }

    // Dark mode toggle
    if (darkModeToggle) {
      darkModeToggle.addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        // Save preference (optional)
        if (document.documentElement.classList.contains('dark')) {
          localStorage.setItem('theme', 'dark');
        } else {
          localStorage.setItem('theme', 'light');
        }
      });

      // Apply saved theme on load (optional)
      if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    }

    // Close dropdowns when clicking outside (basic, for demonstration)
    document.addEventListener('click', (e) => {
      document.querySelectorAll('.group.relative').forEach(dropdown => {
        if (!dropdown.contains(e.target)) {
          dropdown.querySelector('div')?.classList.remove('opacity-100', 'visible', 'scale-y->100');
          dropdown.querySelector('div')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
          dropdown.querySelector('a svg')?.classList.remove('rotate-180');
        }
      });
    });


    // For accessibility/keyboard navigation for dropdowns (complex; basic example)
    document.querySelectorAll('.group.relative > a').forEach(link => {
      link.addEventListener('focus', () => {
        link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-100', 'visible', 'scale-y-100');
        link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-0', 'invisible', 'scale-y-75');
      });

      link.addEventListener('blur', (event) => {
        if (!link.parentElement.contains(event.relatedTarget)) {
          link.parentElement.querySelector('div[role="menu"]')?.classList.remove('opacity-100', 'visible', 'scale-y-100');
          link.parentElement.querySelector('div[role="menu"]')?.classList.add('opacity-0', 'invisible', 'scale-y-75');
        }
      });
    });
  });
<\/style>

スティッキーナビゲーションコンポーネント

マーケットプレイスに適したシンプルで応答性が高く、スティッキーなナビゲーションバーで、類似の配色とダークモードのサポートを備えています。ホバー時の微妙なマイクロインタラクションが含まれます。

開けるプレビュー

                <header class="sticky top-0 z-50 bg-emerald-100/90 backdrop-blur-sm shadow-sm dark:bg-emerald-950/90 dark:shadow-lg transition-colors duration-300">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <div class="flex items-center space-x-8">
      <a href="#" class="flex items-center group">
        <svg class="h-8 w-8 text-emerald-600 dark:text-emerald-300 group-hover:rotate-6 transition-transform duration-200 ease-out" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM5.293 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L10 9.586l-1.293-1.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="ml-2 text-2xl font-bold tracking-tight text-emerald-800 dark:text-emerald-100 group-hover:text-emerald-600 dark:group-hover:text-emerald-200 transition-colors duration-200">MarketPulse</span>
      </a>
      <ul class="hidden md:flex space-x-6">
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Products
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Categories
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-emerald-700 dark:text-emerald-200 text-lg font-medium hover:text-emerald-900 dark:hover:text-emerald-50 transition-colors duration-200 relative group">
            Vendors
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-600 dark:bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-200 ease-out"></span>
          </a>
        </li>
      </ul>
    </div>

    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" 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>
      <button class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Cart">
        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13H4m0 0l2 2m-2-2a2 2 0 100 4 2 2 0 000-4zM17 13h-4m4 0l-2 2m2-2a2 2 0 100 4 2 2 0 000-4z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hidden md:block bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="User Profile">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="h-7 w-7 rounded-full object-cover border border-emerald-300 dark:border-emerald-700">
      </button>
      <div class="flex items-center space-x-2">
        <button id="dark-mode-toggle" aria-label="Toggle dark mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105">
          <svg class="h-6 w-6 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
          </svg>
          <svg class="h-6 w-6 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 4a1 1 0 011 1v1a1 1 0 11-2 0V7a1 1 0 011-1zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm15 0a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1zM9 16a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.586 5.586a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414 0l-.707-.707zm5.657 8.947a1 1 0 01-1.414 0l-.707-.707a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l.707.707a1 1 0 010 1.414l-.707.707zM4 10a6 6 0 1112 0 6 6 0 01-12 0z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
      <button class="md:hidden p-2 rounded-full bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-700 transition-all duration-200 ease-linear transform hover:scale-105" aria-label="Open menu">
        <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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </nav>
</header>

<script>
  // Dark mode functionality (optional, not part of the HTML/CSS requirement but common for such components)
  const toggleDarkMode = () => {
    if (document.documentElement.classList.contains('dark')) {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('theme', 'light');
    } else {
      document.documentElement.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    }
  };

  const darkLightToggle = document.getElementById('dark-mode-toggle');
  if (darkLightToggle) {
    darkLightToggle.addEventListener('click', toggleDarkMode);
  }

  // Apply saved theme on load
  if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>

スティッキーナビゲーションコンポーネント

シンプルでクリーン、かつ信頼できるスティッキーナビゲーションバーは、企業や専門のWebサイト、特に求人掲示板やキャリアプラットフォームに適しています。高コントラストの色、応答性、およびダークモードのサポートを備えています。

開けるプレビュー

                <nav class="sticky top-0 z-50 bg-white shadow-md dark:bg-gray-800 transition duration-300">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-2xl font-bold text-blue-700 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition duration-200">
      JobBoard
    </a>

    <!-- Navigation Links - Desktop -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Jobs</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Companies</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Candidates</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">About Us</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 font-medium transition duration-200">Contact</a>
    </div>

    <!-- Action Buttons - Desktop -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
        Sign In
      </a>
      <a href="#" class="px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">
        Post a Job
      </a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Toggle menu">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, shown by JS in a real app) -->
  <div class="md:hidden flex flex-col space-y-2 p-4 border-t border-gray-200 dark:border-gray-700" style="display: none;">
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Jobs</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Companies</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Candidates</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">About Us</a>
    <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-400 py-2 transition duration-200">Contact</a>
    <a href="#" class="block px-4 py-2 rounded-md border border-gray-300 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 text-center transition duration-200 mt-2">Sign In</a>
    <a href="#" class="block px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200">Post a Job</a>
  </div>
</nav>