検索コンポーネント

カテゴリ

コンポーネントナビゲーション強化コンポーネント

ナビゲーション強化コンポーネント

Webサイトのナビゲーションを改善する高度なコンポーネント

Industrial_Monochromatic_Navigation

産業および製造企業向けの複雑なダークモードに焦点を当てたナビゲーションコンポーネントで、ダッシュボードや運用インターフェースに適したモノクロデザインと複数のインタラクティブ要素を特徴としています。

                <header class="bg-gray-950 dark:bg-gray-950 text-gray-200 dark:text-gray-200 shadow-md sticky top-0 z-50">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap md:flex-nowrap">
    <!-- Logo & Brand Name -->
    <div class="flex items-center flex-shrink-0 mr-6 mb-4 md:mb-0">
      <svg class="h-8 w-8 mr-2 text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M9.504 1.134A1 1 0 0110 1h.496a1 1 0 01.496.504l.056.112.013.025.132.265.131.264.496.992.352.704.056.112.013.025.132.265.131.264.496.992.352.704a1 1 0 010 .984l-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112a1 1 0 01-1.992 0l-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704a1 1 0 010-.984l.352-.704.496-.992.131-.264.132-.265.013-.025.056-.112.352-.704.496-.992.131-.264.132-.265.013.025.056.112A1 1 0 019.504 1.134zM9.01 4.509a1 1 0 00-1.98 0l-.055.11-.013.027c-.122.247-.245.495-.367.742l-.244.492a1 1 0 000 .991l.244.492c.122.247.245.495.367.742l.013.027.055.11a1 1 0 001.98 0l.055-.11.013-.027c.122-.247.245-.495.367-.742l.244-.492a1 1 0 000-.991l-.244-.492c-.122-.247-.245-.495-.367-.742l-.013-.027-.055-.11zm-.056-.226l.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026a1 1 0 011.98 0l.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119c-.046-.093-.09-.187-.134-.281zm.056.226z" clip-rule="evenodd" />
      </svg>
      <span class="font-semibold text-xl tracking-tight text-blue-400 dark:text-blue-400">InnoManufac</span>
    </div>

    <!-- Mobile Menu Toggle -->
    <div class="block md:hidden mb-4 md:mb-0">
      <button class="navbar-toggler flex items-center px-3 py-2 border rounded text-gray-400 border-gray-600 hover:text-white hover:border-white"
        onclick="document.getElementById('mobile-menu').classList.toggle('hidden'); document.getElementById('mobile-menu').classList.toggle('flex');">
        <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 6h20v2H0v-2z" />
        </svg>
      </button>
    </div>

    <!-- Main Navigation Links (Desktop & Mobile) -->
    <div id="mobile-menu" class="w-full flex-grow hidden md:flex md:items-center md:w-auto mt-4 md:mt-0 flex-col md:flex-row">
      <div class="text-sm md:flex-grow flex flex-col md:flex-row items-center">
        <a href="#dashboard" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Dashboard
        </a>
        <a href="#operations" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Operations
        </a>
        <a href="#analytics" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Analytics
        </a>
        <a href="#maintenance" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Maintenance
        </a>
        <a href="#inventory" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
          Inventory
        </a>
      </div>

      <!-- Search & User Profile -->
      <div class="flex items-center flex-col md:flex-row">
        <div class="relative mb-4 md:mb-0 md:mr-4 w-full md:w-auto">
          <input type="search" placeholder="Search anything..." class="bg-gray-800 dark:bg-gray-800 text-gray-300 dark:text-gray-300 rounded-md py-2 pl-10 pr-4 block w-full leading-normal placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300 ease-in-out">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
        
        <div class="flex items-center space-x-4">
          <!-- Notifications Dropdown (example) -->
          <div class="relative group">
            <button class="text-gray-400 dark:text-gray-400 hover:text-white dark:hover:text-white p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
              <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 0a3 3 0 11-6 0m6 0v1h-6v-1m6 0H9"/></svg>
              <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
            </button>
            <div class="absolute right-0 mt-2 w-72 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight">New sensor data critical anomaly</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Maintenance scheduled for Line 3</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Daily production report available</a>
            </div>
          </div>

          <!-- User Profile Dropdown -->
          <div class="relative group">
            <button class="block w-10 h-10 rounded-full overflow-hidden border-2 border-gray-600 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-400 transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
              <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Settings</a>
              <a href="#" class="block px-4 py-2 text-sm text-red-400 dark:text-red-400 hover:bg-gray-700 dark:hover:bg-gray-700 border-t border-gray-700 dark:border-gray-700 mt-1 pt-2">Sign out</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>

紙/印刷にインスパイアされたエンターテインメントプラットフォーム向けナビゲーション

エンターテインメントプラットフォーム向けのシンプルでレスポンシブなナビゲーションコンポーネントで、フォレストグリーンのカラーパレットで紙/印刷スタイルを模倣しています。ダークモードのサポートが含まれており、セマンティックHTMLを使用します。

開けるプレビュー

                <nav class="bg-lime-50 dark:bg-gray-800 p-4 border-b-4 border-lime-700 dark:border-lime-300 font-serif overflow-hidden relative">
  <div class="max-w-7xl mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-lime-700 dark:text-lime-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M3 5h18M5 9h14v10a2 2 0 01-2 2H7a2 2 0 01-2-2V9zm0 0V5a2 2 0 012-2h10a2 2 0 012 2v4M7 9h10l-1 12H8l-1-12z" />
      </svg>
      <a href="#" class="text-lime-800 dark:text-lime-100 text-2xl font-bold tracking-tight">Page Turner</a>
    </div>

    <!-- Desktop Navigation -->
    <ul class="hidden md:flex space-x-8">
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Home</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">Browse</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">My Shelf</a></li>
      <li><a href="#" class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-lg transition-colors duration-200">About</a></li>
    </ul>

    <!-- Mobile Menu Button -->
    <button aria-label="Toggle Mobile Menu" class="md:hidden text-lime-700 dark:text-lime-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-lime-500 rounded" onclick="document.getElementById('mobile-menu').classList.toggle('hidden');">
      <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>

  <!-- Mobile Navigation (hidden by default) -->
  <div id="mobile-menu" class="hidden md:hidden mt-4 border-t border-lime-700 dark:border-lime-400 pt-4">
    <ul class="flex flex-col space-y-4">
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Home</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">Browse</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">My Shelf</a></li>
      <li><a href="#" class="block text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 text-xl font-medium transition-colors duration-200 px-4 py-2">About</a></li>
    </ul>
  </div>

  <!-- Subtle paper texture element -->
  <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzgiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgNzggMTAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOS4xNDc0NSAzLjM3MjM2QzcuOTUyNzcgMi41Njg2MSA3LjUwNjExIDIuMDcwOTggNi42NDQyNyAxLjU5NTQzQzQuMjI5ODYgMC4yNjUwMzggMS40ODk0OSAtMC42NTk1MjkgMS42MDQyMiAxLjUxOTU0QzEuNzUzNjUgNjk0LjI2IDAuNzU2Mjg4IDkyNC43MTggMC43NTYyODggOTI2LjgyMUMwLjc1NjI4OCA5NjguNzY5IDQwLjg0OTUgOTk5LjE3NSA3OC4yMzE5IDk5OS4xNzVDNzguMjMxOSA5OTkuMTc1IDc2LjAxNzUgMTAwMSA3NS4wNjc2IDEwMDJDNzEuNzk5MSAxMDIxLjM5IDY5LjE0MTIgMTAwMCA2OS4wNzQ4IDEwMDAuMDZDNDkuNTM2OCA5OTkuODYxIDI2LjAwNjkgOTUwLjk0MiAxNi4xNDggOTI2LjgyQzExLjU0OTUgODk5LjQ2NCAxMC42NjcxIDguOTA3NDggOS4xNDc0NSAzLjM3MjM2WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eXM9IjAuMDUiLz4KPC9zdmc+'); background-repeat: repeat;"></div>
</nav>

ArtDeco_Neon_Photography_Navigation

写真ポートフォリオ用のシンプルでレスポンシブなナビゲーションコンポーネントで、アールデコ風の幾何学模様と、ダークモードをサポートする鮮やかなネオン/エレクトリックカラースキームが特徴です。

開けるプレビュー

                <nav class="bg-gradient-to-r from-purple-900 via-pink-800 to-indigo-900 dark:from-purple-950 dark:via-pink-900 dark:to-indigo-950 p-4 shadow-xl font-['Georgia',_serif]">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-white tracking-widest text-3xl font-bold uppercase select-none relative group">
      <span class="relative z-10">LUMINA</span>
      <span class="absolute inset-0 bg-gradient-to-br from-pink-500 to-blue-500 blur-sm opacity-0 group-hover:opacity-75 transition-opacity duration-300"></span>
      <span class="absolute inset-0 bg-gradient-to-br from-pink-400 to-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform group-hover:scale-105"></span>
    </a>

    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border-2 rounded text-white border-neon-blue-400 hover:text-neon-pink-400 hover:border-neon-pink-400 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-neon-blue-300">
        <svg class="fill-current h-6 w-6" 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 lg:block" id="navbar-default">
      <ul class="text-sm lg:flex flex-1 items-center lg:justify-end uppercase tracking-wide">
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-blue-300 transition-colors duration-300 px-4 py-2 relative group">
            Gallery
            <span class="block h-0.5 bg-neon-blue-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-pink-300 transition-colors duration-300 px-4 py-2 relative group">
            Portfolio
            <span class="block h-0.5 bg-neon-pink-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-green-300 transition-colors duration-300 px-4 py-2 relative group">
            About
            <span class="block h-0.5 bg-neon-green-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
        <li>
          <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-yellow-300 transition-colors duration-300 px-4 py-2 relative group">
            Contact
            <span class="block h-0.5 bg-neon-yellow-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Eコマース産業用ナビゲーション

原材料と露出した要素の美的感覚を備えた、複雑でインダストリアルスタイルのeコマースナビゲーションコンポーネント。モノクロの黒と白の配色に明るいアクセントがあり、ダークモードをサポートして完全にレスポンシブです。

開けるプレビュー

                <header class="bg-white dark:bg-gray-950 shadow-md border-b-2 border-gray-200 dark:border-gray-800">
  <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <!-- Logo/Brand Section -->
    <div class="flex items-center flex-shrink-0">
      <a href="#" class="text-gray-900 dark:text-white text-3xl font-extrabold tracking-tight uppercase font-mono">
        <span class="text-orange-500">PRO</span>DUCTS
      </a>
    </div>

    <!-- Main Navigation & Search -->
    <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 w-full md:w-auto">
      <nav class="hidden md:flex space-x-6 lg:space-x-8">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          New Arrivals
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          Categories
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          Sale
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 text-lg font-semibold tracking-wide uppercase transition duration-300 ease-in-out font-mono relative group">
          About Us
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-orange-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
        </a>
      </nav>

      <div class="relative w-full md:w-80 lg:w-96">
        <input type="text" placeholder="Search products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white border-2 border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent transition-all duration-300 ease-in-out font-sans placeholder-gray-500 dark:placeholder-gray-400">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
        </svg>
      </div>
    </div>

    <!-- User Actions (Cart, Account, etc.) -->
    <div class="flex items-center space-x-6 pl-4 border-l-2 border-gray-200 dark:border-gray-800 hidden lg:flex">
      <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
        </svg>
        <span class="sr-only">Account</span>
      </a>
      <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48zM17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-orange-500 rounded-full">3</span>
        <span class="sr-only">Shopping Cart</span>
      </a>
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
          <path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
    </div>

    <!-- Mobile Menu Toggle -->
    <div class="md:hidden flex items-center space-x-4">
      <button type="button" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-500 transition duration-300 ease-in-out" onclick="document.documentElement.classList.toggle('dark')" aria-label="Toggle dark mode">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path class="dark:hidden" d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25zM12 19.5a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V20.25a.75.75 0 01.75-.75zM19.5 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3A.75.75 0 012.25 12zM16.816 6.004a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 16.892a.75.75 0 01-1.056.077l-1.597-1.597a.75.75 0 01.077-1.056.75.75 0 011.056.077l1.597 1.597a.75.75 0 01-.077 1.056zM18.913 18.913a.75.75 0 01.077 1.056l-1.597 1.597a.75.75 0 01-1.056-.077.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077zM4.93 7.108a.75.75 0 01.077-1.056l1.597-1.597a.75.75 0 011.056.077.75.75 0 01-.077 1.056L6.004 7.185a.75.75 0 01-1.056-.077zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"></path>
          <path class="hidden dark:block" d="M9.599 3.099a.75.75 0 01.52.193 7.5 7.5 0 008.208 8.208.75.75 0 01.193.52c0 .99-.187 1.92-.513 2.766L20.082 18l-.943.943-4.053-4.052a7.5 7.5 0 00-6.713-13.687.75.75 0 01.52-.193zM12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3A.75.75 0 0112 2.25z"></path>
        </svg>
        <span class="sr-only">Toggle Dark Mode</span>
      </button>
      <button id="mobile-menu-button" class="text-gray-700 dark:text-gray-300 focus:outline-none focus:text-orange-500 dark:focus:text-orange-500">
        <svg class="w-8 h-8" 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>
  </div>

  <!-- Mobile Menu (initially hidden) -->
  <div id="mobile-menu" class="hidden md:hidden px-4 pt-2 pb-4 space-y-2 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">New Arrivals</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Categories</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">Sale</a>
    <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">About Us</a>
    <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 pt-2 border-t border-gray-300 dark:border-gray-700">
      <a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
        </svg>
        Account
      </a>
      <a href="#" class="flex items-center px-3 py-2 rounded-md text-base font-medium hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-500 dark:hover:text-orange-500 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 18.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-7 0c0 .83-.67 1.5-1.5 1.5S7 19.33 7 18.5s.67-1.5 1.5-1.5C9.33 17 10 17.67 10 18.5zm10.79-11.52A.981.981 0 0020 6.5H6.26L5.3 3.66A.978.978 0 004.45 3H2v2h2.24l2.94 9.53L6.16 16H20v-2H7.4l-1.12-3.86L18 8a.99.99 0 00.79-.48z"></path>
        </svg>
        Cart
        <span class="ml-1 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-white transform bg-orange-500 rounded-full">3</span>
      </a>
    </div>
  </div>
</header>

<script>
  // Basic JavaScript for mobile menu toggle
  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 inside is clicked (optional)
      mobileMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          mobileMenu.classList.add('hidden');
        });
      });
    }
  });
</script>

ダークモードメディアナビゲーション

エンターテインメント/メディアプラットフォーム向けの複雑で応答性の高いナビゲーションコンポーネントで、フォレスト/グリーンのカラーパレットを備えたダークモード UI を備えています。ロゴ、検索バー、ナビゲーションリンク、ユーザープロファイル、通知ベルが含まれます。

開けるプレビュー

                <nav class="bg-zinc-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 shadow-lg dark:shadow-xl">
  <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
    <!-- Logo Section -->
    <div class="flex items-center space-x-3 mb-2 md:mb-0">
      <svg class="h-9 w-9 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10l-3-3m0 0l-3 3m3-3V4m3 10h4.876a.625.625 0 01.352 1.157l-1.587 1.587A.625.625 0 0115.124 18H10z" />
      </svg>
      <span class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-green-600">StreamVerse</span>
    </div>

    <!-- Search Bar -->
    <div class="relative flex-grow mx-4 max-w-lg w-full mb-2 md:mb-0">
      <input type="text" placeholder="Search movies, series, and more..." class="w-full py-2 pl-10 pr-4 rounded-full bg-zinc-800 dark:bg-gray-800 text-gray-200 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all duration-300 ease-in-out">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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" />
      </svg>
    </div>

    <!-- Main Navigation Links -->
    <div class="hidden lg:flex items-center space-x-6">
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Movies
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Series
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 group">
        Live TV
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-emerald-500 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>

    <!-- User Profile and Notifications -->
    <div class="flex items-center space-x-6 ml-auto">
      <button class="relative text-gray-300 hover:text-emerald-400 transition-colors duration-200 focus:outline-none">
        <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="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>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-sm font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </button>
      <div class="relative group">
        <img class="h-10 w-10 rounded-full border-2 border-emerald-500 object-cover cursor-pointer" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="absolute hidden group-hover:block right-0 mt-2 w-48 bg-zinc-800 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden z-10">
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
          <a href="#" class="block px-4 py-3 text-sm text-gray-300 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
        </div>
      </div>
    </div>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden ml-4">
      <button class="text-gray-300 hover:text-emerald-400 focus:outline-none peer">
        <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 12h16M4 18h16" />
        </svg>
      </button>
      <!-- Mobile Menu Content -->
      <div class="hidden peer-focus:block absolute top-full left-0 w-full bg-zinc-800 dark:bg-gray-800 shadow-lg py-2 mt-1 z-20 transition-all duration-300 ease-out origin-top">
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Home</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Movies</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Series</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Live TV</a>
        <div class="border-t border-gray-700 my-2"></div>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Profile</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Watchlist</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Settings</a>
        <a href="#" class="block px-4 py-3 text-gray-200 hover:bg-emerald-700 hover:text-white transition-colors duration-200">Logout</a>
      </div>
    </div>
  </div>
</nav>

Cyberpunk_Portfolio_Navigation

複雑で応答性の高いサイバーパンクをテーマにしたポートフォリオのナビゲーションコンポーネントで、近未来的なネオンパープルの美学、暗い背景、インタラクティブな要素が特徴です。ダークモードのサポートが含まれています。

開けるプレビュー

                <header class="bg-zinc-950 text-purple-400 shadow-lg shadow-purple-900/50 dark:bg-zinc-900 dark:text-purple-300 dark:shadow-purple-700/30 font-mono tracking-wide relative z-50">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between lg:py-4">
    <a href="#" class="flex items-center space-x-2 group">
      <svg class="h-8 w-8 text-purple-600 group-hover:text-purple-400 transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M19.5 10l.91-1m-1.54-5.5l.01-.01M7.05 12.05l-.01-.01M2.27 14L4 15.5l.65-.65V18l2-2v-.65l.65-.65H11l-.45-.45-1.07-1.07M12 17.25L10.5 16ZM6 10V6l1-1h6l1 1v4l-1 1H7l-1-1zm4.75-5l-.5-.5L4 8.75l-.5.5L7 12.25l.5.5zM12.25 17.25L16 13.5l.5-.5L12.25 9.75l-.5-.5zM17 10V6l1-1h6l1 1v4l-1 1h-6l-1-1z" />
      </svg>
      <span class="text-2xl font-bold text-purple-500 group-hover:text-purple-300 transition-colors duration-300">[SYNAPTIC]</span>
    </a>

    <nav class="hidden lg:flex space-x-8">
      <a href="#projects" class="text-lg relative group overflow-hidden py-1 leading-none">
        Projects
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#skills" class="text-lg relative group overflow-hidden py-1 leading-none">
        Skills
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#experience" class="text-lg relative group overflow-hidden py-1 leading-none">
        Experience
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#contact" class="text-lg relative group overflow-hidden py-1 leading-none">
        Contact
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
    </nav>

    <div class="flex items-center space-x-4">
      <!-- Dark Mode Toggle (placeholder for JS functionality) -->
      <button aria-label="Toggle dark mode" class="p-2 rounded-full bg-purple-800 text-purple-200 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-zinc-950 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-offset-zinc-900 transition-colors duration-300">
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path 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>

      <!-- Mobile Menu Button -->
      <button aria-label="Open menu" class="lg:hidden p-2 rounded-md bg-purple-800 text-purple-200 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-zinc-950 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-offset-zinc-900 transition-colors duration-300">
        <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, would be toggled by JS) -->
  <div class="lg:hidden absolute top-full left-0 w-full bg-zinc-900 border-t border-purple-800 shadow-xl shadow-purple-900/50 dark:bg-zinc-800 dark:border-purple-700 dark:shadow-purple-700/30 overflow-hidden" style="max-height: 0; transition: max-height 0.4s ease-out;">
    <nav class="flex flex-col p-4 space-y-3">
      <a href="#projects" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Projects</a>
      <a href="#skills" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Skills</a>
      <a href="#experience" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Experience</a>
      <a href="#contact" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Contact</a>
    </nav>
    <div class="flex justify-center p-4 border-t border-purple-800 dark:border-purple-700">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Developer Avatar" class="w-16 h-16 rounded-full border-2 border-purple-600 shadow-md shadow-purple-700/50 object-cover">
    </div>
  </div>
</header>

Monospace_Booking_Navigation_Complex_Triadic

モノスペース/開発者の美学を備えた複雑な予約/予約ナビゲーションコンポーネント。トライアドカラースキーム、レスポンシブデザイン、ダークモードのサポートが特徴で、アポイントメントシステムに最適です。

開けるプレビュー

                <div class="font-mono min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 flex flex-col">
  <!-- Header Navigation -->
  <header class="bg-emerald-600 dark:bg-emerald-800 text-white p-4 shadow-lg z-10">
    <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
      <div class="text-2xl font-bold tracking-tight mb-2 md:mb-0">[BOOK.]_SYSTEM</div>
      <nav class="flex flex-wrap justify-center gap-4 text-sm font-medium">
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Dashboard</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Bookings</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Services</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Clients</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Reports</a>
      </nav>
      <div class="mt-4 md:mt-0 flex items-center gap-4">
        <button class="p-2 rounded-full bg-emerald-700 dark:bg-emerald-900 hover:bg-emerald-800 dark:hover:bg-emerald-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white" aria-label="Notifications">
          <svg class="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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0V6a2 2 0 012-2h2a2 2 0 012 2v5a6.002 6.002 0 014 5.158V14a2 2 0 00-2-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 0"></path></svg>
        </button>
        <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
      </div>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="flex-1 container mx-auto p-4 md:p-6 lg:p-8 flex flex-col lg:flex-row gap-6">

    <!-- Sidebar / Contextual Controls -->
    <aside class="w-full lg:w-1/4 bg-blue-50 dark:bg-blue-950 p-6 rounded-lg border-2 border-dashed border-blue-200 dark:border-blue-800 shadow-md">
      <h2 class="text-xl font-bold mb-4 text-blue-800 dark:text-blue-200 underline">_Filter_Bookings</h2>
      <div class="mb-6">
        <label for="service-type" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[SERVICE]</label>
        <select id="service-type" class="w-full p-2 rounded-md bg-blue-100 dark:bg-blue-900 border border-blue-300 dark:border-blue-700 focus:ring-blue-500 focus:border-blue-500 text-blue-900 dark:text-blue-100 placeholder-blue-400 dark:placeholder-blue-600 outline-none">
          <option>All Services</option>
          <option>Consultation</option>
          <option>Maintenance</option>
          <option>Deployment</option>
        </select>
      </div>
      <div class="mb-6">
        <label for="date-range" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[DATE_RANGE]</label>
        <input type="range" id="date-range" min="0" max="100" value="50" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer dark:bg-blue-700 accent-blue-600">
        <div class="flex justify-between text-xs text-blue-600 dark:text-blue-400 mt-1">
          <span>Past</span>
          <span>Future</span>
        </div>
      </div>
      <div class="mb-6">
        <label for="status-filter" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[STATUS]</label>
        <div class="flex flex-col gap-2">
          <label class="inline-flex items-center">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded dark:bg-blue-800 dark:border-blue-700 focus:ring-blue-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Pending</span>
          </label>
          <label class="inline-flex items-center">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-emerald-600 rounded dark:bg-emerald-800 dark:border-emerald-700 focus:ring-emerald-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Confirmed</span>
          </label>
          <label class="inline-flex items-center">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-rose-600 rounded dark:bg-rose-800 dark:border-rose-700 focus:ring-rose-500"><span class="ml-2 text-blue-900 dark:text-blue-100">Cancelled</span>
          </label>
        </div>
      </div>
      <button class="w-full bg-blue-600 dark:bg-blue-700 text-white py-2 rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-blue-950 focus:ring-blue-500">_APPLY_FILTERS</button>
    </aside>

    <!-- Main Content Panel -->
    <section class="flex-1 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-2 border-gray-200 dark:border-gray-700">
      <h1 class="text-2xl md:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 flex items-center">
        <span class="mr-2 text-emerald-500 dark:text-emerald-400">&#9608;</span> UPCOMING_BOOKINGS
      </h1>

      <!-- Booking List/Table -->
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ID]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[CLIENT]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[SERVICE]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[DATE]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[TIME]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[STATUS]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ACTIONS]</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            <!-- Booking Row 1 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1A2B3C</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/67.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Alice_Smith</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Consultation_V2</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-28</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10:00_AM</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
                  CONFIRMED
                </span>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
                <a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
              </td>
            </tr>
            <!-- Booking Row 2 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1D4E5F</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Bob_Johnson</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_System_Setup</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-29</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">02:00_PM</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">
                  PENDING
                </span>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
                <a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
              </td>
            </tr>
            <!-- Booking Row 3 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x2F6A7B</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Carol_White</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Debugging_Svc</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-01</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09:30_AM</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
                  CONFIRMED
                </span>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
                <a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
              </td>
            </tr>
            <!-- Booking Row 4 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x3B8C9D</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">David_King</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Data_Migration</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-05</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm flex items-center justify-start text-rose-500 dark:text-rose-400">
                CANCELED
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">01:00_PM</td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_VIEW</a>
                <a href="#" class="text-gray-400 dark:text-gray-600 cursor-not-allowed">_Rebook</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="mt-8 flex flex-col sm:flex-row justify-between items-center text-sm">
        <div class="text-gray-600 dark:text-gray-400 mb-4 sm:mb-0">Showing 1 to 4 of 12 Results</div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
            <span class="sr-only">Previous</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors duration-200 z-10">1</a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">2</a>
          <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">3</a>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">...</span>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">12</a>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
            <span class="sr-only">Next</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </nav>
      </div>

    </section>

  </main>

  <!-- Footer Component -->
  <footer class="bg-rose-600 dark:bg-rose-800 text-white p-4 text-center text-sm opacity-90">
    <div class="container mx-auto">
      &copy; 2024 <span class="font-bold">[BOOK._SYS]</span>. All rights reserved. <span class="text-opacity-70">//_end_of_transmission</span>
    </div>
  </footer>
</div>

紙/印刷にインスパイアされた政府ナビゲーション

政府/公共のWebサイト向けの複雑な紙/印刷物にインスパイアされたナビゲーションコンポーネントで、セピア/ブラウンの色調、応答性、およびダークモードのサポートが特徴です。これには、主要なナビゲーション、検索、および「クイックリンク」または「サービス」セクションが含まれます。

開けるプレビュー

                <header class="font-serif bg-gradient-to-b from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-950 text-stone-800 dark:text-stone-200 shadow-lg">
  <div class="container mx-auto px-4 py-4 md:py-6">
    <div class="flex flex-col md:flex-row items-center justify-between gap-4">
      <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
        <svg class="w-10 h-10 text-amber-900 dark:text-amber-600" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93h7v7.93zM10.85 4.07c.18-.03.36-.07.55-.07s.37.04.55.07L12 2.05c-3.95-.49-7-3.85-7-7.93h7v7.93zM13 19.93V12h7c0 4.08-3.05 7.44-7 7.93zM13.15 4.07C13.33 4.04 13.5 4 13.68 4s.37.04.55.07L12 2.05c-3.95-.49-7-3.85-7-7.93h7v7.93zM22 12h-7c0-4.08 3.05-7.44 7-7.93v7.93z"></path>
        </svg>
        <span class="self-center text-3xl font-bold whitespace-nowrap text-amber-900 dark:text-amber-500">Gob.us</span>
      </a>

      <div class="flex items-center w-full md:w-auto mt-4 md:mt-0">
        <form class="flex w-full">
          <label for="default-search" class="mb-2 text-sm font-medium text-stone-900 sr-only dark:text-white">Search</label>
          <div class="relative w-full">
            <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
              <svg class="w-4 h-4 text-stone-500 dark:text-stone-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
              </svg>
            </div>
            <input type="search" id="default-search" class="block w-full p-2.5 ps-10 text-sm text-stone-900 border border-stone-300 rounded-lg bg-stone-50 focus:ring-amber-500 focus:border-amber-500 dark:bg-stone-800 dark:border-stone-700 dark:placeholder-stone-400 dark:text-white dark:focus:ring-amber-500 dark:focus:border-amber-500" placeholder="Search services, forms, news..." required>
            <button type="submit" class="text-white absolute end-2.5 bottom-2 bg-amber-700 hover:bg-amber-800 focus:ring-4 focus:outline-none focus:ring-amber-300 font-medium rounded-lg text-sm px-4 py-1.5 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-800">Search</button>
          </div>
        </form>
      </div>
    </div>

    <nav class="mt-6 bg-amber-200 dark:bg-stone-800 p-3 rounded-lg shadow-inner border-t-2 border-l-2 border-stone-300 dark:border-stone-700">
      <ul class="flex flex-wrap justify-center md:justify-start gap-x-6 gap-y-3 text-lg font-semibold text-amber-900 dark:text-amber-200">
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">Home</a></li>
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">About Us</a></li>
        <li>
          <div class="relative group">
            <button class="flex items-center hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent group-hover:border-amber-700 dark:group-hover:border-amber-400 transition duration-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 rounded-sm">
              Services
              <svg class="w-4 h-4 ml-1" 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>
            </button>
            <div class="absolute left-0 mt-2 w-48 bg-stone-50 dark:bg-stone-700 border border-stone-200 dark:border-stone-600 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition duration-300 z-10">
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Online Forms</a>
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Permits & Licenses</a>
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Tax Information</a>
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Public Records</a>
            </div>
          </div>
        </li>
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">News & Events</a></li>
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

ネイチャー Inspired_Entertainment_Navigation

エンターテインメント/メディアプラットフォーム向けの複雑で自然にインスパイアされたナビゲーションコンポーネントで、流れるようなラインとキャンディー/甘い配色が特徴です。ダークモードのサポートにより完全にレスポンシブ。

開けるプレビュー

                <nav class="relative bg-gradient-to-br from-purple-200 via-pink-200 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-green-950 shadow-lg dark:shadow-xl rounded-b-3xl md:rounded-b-[4rem] overflow-hidden p-4 md:p-6 lg:p-8 transform -skew-y-1 perspective-1000">
  <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/natural-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply dark:mix-blend-screen -skew-y-1"></div>
  <div class="relative flex flex-col md:flex-row items-center justify-between mx-auto max-w-7xl skew-y-1">
    
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2 mb-4 md:mb-0">
      <svg class="h-10 w-10 text-pink-600 dark:text-purple-400 transform rotate-45 -translate-y-1" 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="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 100 8h10a4 4 0 100-8H7zm0 0l-4-4m4 4l-4 4m10 0l4-4m-4 4l4 4"></path>
      </svg>
      <a href="#" class="font-extrabold text-3xl text-purple-700 dark:text-pink-300 font-serif tracking-tight drop-shadow-md dark:drop-shadow-lg">WAVEFLIX</a>
    </div>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <button class="text-purple-700 dark:text-pink-300 hover:text-pink-600 dark:hover:text-purple-400 focus:outline-none focus:ring-2 focus:ring-pink-400 rounded-md p-2 transition duration-300 ease-in-out" aria-label="Toggle navigation menu">
        <svg class="h-8 w-8" 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>

    <!-- Main Navigation Links -->
    <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12 mt-4 md:mt-0">
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Home</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Movies</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Series</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Live</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
      <a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
        <span class="relative z-10">Categories</span>
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
      </a>
    </div>

    <!-- Search and User Profile -->
    <div class="hidden md:flex items-center space-x-4 lg:space-x-6 mt-4 md:mt-0">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-white/70 dark:bg-gray-800/70 border border-transparent focus:border-pink-400 focus:ring-2 focus:ring-pink-200 dark:focus:border-purple-600 dark:focus:ring-2 dark:focus:ring-purple-900 text-purple-900 dark:text-pink-100 placeholder-purple-500 dark:placeholder-pink-400 transition duration-300 ease-in-out shadow-sm dark:shadow-md backdrop-blur-sm">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-purple-500 dark:text-pink-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>
      <button class="relative flex items-center justify-center p-2 rounded-full bg-pink-400/80 dark:bg-purple-600/80 hover:bg-pink-500 hover:dark:bg-purple-700 transition duration-300 ease-in-out shadow-md dark:shadow-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-purple-500">
        <svg class="h-6 w-6 text-white dark:text-pink-100" 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 top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full transform translate-x-1/2 -translate-y-1/2">3</span>
      </button>
      <a href="#" class="block relative w-10 h-10 rounded-full overflow-hidden border-2 border-pink-400 dark:border-purple-500 transform transition duration-300 ease-in-out hover:scale-110 shadow-md">
        <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Profile">
        <span class="absolute bottom-0 right-0 h-3 w-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-900"></span>
      </a>
    </div>
  </div>
</nav>

Playful_Consulting_Navigation_Component

コンサルティング/サービス向けのシンプルで遊び心があり、陽気なナビゲーションコンポーネントで、丸みを帯びた要素、明るいアクセントのモノクロ配色、ダークモードをサポートする完全な応答性が特徴です。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- Logo/Brand Name -->
    <a href="#" class="flex items-center space-x-2 rtl:space-x-reverse font-bold text-2xl text-gray-900 dark:text-white">
      <svg class="w-8 h-8 text-indigo-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="M12 6V4m0 2a2 2 0 00-2 2v2a2 2 0 002 2 2 2 0 002-2V8a2 2 0 00-2-2zm0 6a2 2 0 00-2 2v2a2 2 0 002 2 2 2 0 002-2v-2a2 2 0 00-2-2z">
        </path>
      </svg>
      <span>BrightConsult</span>
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
      </svg>
    </button>

    <!-- Navigation Links -->
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About Us</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-indigo-500 md:p-0 dark:text-white md:dark:hover:text-indigo-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-white bg-indigo-500 rounded-full hover:bg-indigo-600 md:ml-4 transition-colors duration-200">Get Started</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for toggling mobile menu
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('[data-collapse-toggle="navbar-default"]');
    const menu = document.getElementById('navbar-default');

    if (button && menu) {
      button.addEventListener('click', function() {
        const expanded = this.getAttribute('aria-expanded') === 'true' || false;
        this.setAttribute('aria-expanded', !expanded);
        menu.classList.toggle('hidden');
      });
    }
  });
</script>