検索コンポーネント

カテゴリ

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

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

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

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

3Dデザインの美学とフォレスト/グリーンのカラーパレットを備えた、ヘルスケア/医療アプリケーションに適した、複雑で応答性の高いスティッキーナビゲーションコンポーネント。ダークモードのサポートとインタラクティブな要素が含まれています。

                <nav class="sticky top-0 z-50 w-full backdrop-blur-sm bg-lime-100/80 dark:bg-emerald-950/80 shadow-lg dark:shadow-emerald-700/30 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-2 md:py-4 flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-2 md:mb-0">
      <a href="#" class="flex items-center space-x-2 text-emerald-800 dark:text-emerald-50 font-bold text-2xl md:text-3xl tracking-tight">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-emerald-600 dark:text-emerald-400 transform -rotate-12 transition-transform duration-300 ease-in-out" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-1-11h2v6h-2zm0 8h2v2h-2z"/>
          <path d="M12 11a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v5a1 1 0 0 1-1 1zm0 8a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1z" fill="url(#gradient)"/>
          <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#10B981" />
              <stop offset="100%" stop-color="#059669" />
            </linearGradient>
          </defs>
        </svg>
        <span class="drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.2)] dark:drop-shadow-[0_1.2px_1.2px_rgba(255,255,255,0.1)]">MedCare</span>
      </a>
      <button id="navbar-toggle" class="md:hidden focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md p-2 transition-all duration-200 ease-in-out">
        <svg class="w-7 h-7 text-emerald-700 dark:text-emerald-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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <div id="navbar-menu" class="hidden md:flex flex-col md:flex-row md:items-center space-y-2 md:space-y-0 md:space-x-8 lg:space-x-12 w-full md:w-auto text-center md:text-left">
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        Home
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>
      <div class="relative group">
        <button class="flex items-center text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md py-2 md:py-0">
          Services
          <svg class="ml-1 w-4 h-4 transition-transform duration-200 ease-in-out group-hover:rotate-180" 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 z-10 hidden group-hover:block bg-white dark:bg-emerald-900 shadow-xl dark:shadow-emerald-800/50 rounded-lg py-2 mt-2 w-48 transition-all duration-300 ease-out transform origin-top-left scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 perspective-100 rotate-x-5">
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Consultation
          </a>
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Appointments
          </a>
          <a href="#" class="block px-4 py-2 text-emerald-700 dark:text-emerald-100 hover:bg-emerald-50 dark:hover:bg-emerald-800 transition-colors duration-200 ease-in-out rounded-lg m-1 hover:scale-105 transform origin-left perspective-100 -rotate-x-3">
            Health Records
          </a>
        </div>
      </div>
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        About Us
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>
      <a href="#" class="relative text-lg font-medium text-emerald-800 dark:text-emerald-50 hover:text-emerald-600 dark:hover:text-emerald-300 transition duration-300 ease-in-out py-2 md:py-0 group transform perspective-100 min-w-[70px]">
        Contact
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-600 dark:bg-emerald-400 scale-x-0 group-hover:scale-x-100 transition-transform origin-center duration-300"></span>
        <span class="absolute -bottom-2 left-1/2 -ml-0.5 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-emerald-600 dark:border-t-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform rotate-180 group-hover:rotate-0"></span>
      </a>

      <div class="flex items-center space-x-4 md:ml-auto mt-4 md:mt-0">
        <button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="p-2 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-700 dark:text-emerald-200 shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
          <svg class="w-6 h-6 sun-icon" 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 12H2m15.325-4.573l.707-.707M3.929 19.071l.707-.707m-4.596 0l-.707.707M19.071 3.929l-.707.707M6 12a6 6 0 1112 0 6 6 0 01-12 0z"></path>
          </svg>
          <svg class="w-6 h-6 moon-icon hidden" 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="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"></path>
          </svg>
        </button>
        <a href="#" class="flex items-center p-2 rounded-full bg-emerald-600 dark:bg-emerald-500 text-white shadow-md dark:shadow-emerald-950/50 hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-emerald-500">
            <img class="w-8 h-8 rounded-full object-cover mr-2 brightness-90 contrast-125 saturate-150" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
            <span class="text-sm font-medium hidden lg:block perspective-100 rotate-x-5">Dr. Smith</span>
            <svg class="w-5 h-5 ml-2 hidden lg:block transition-transform transform rotate-90" 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="M5.121 17.804A11.952 11.952 0 0112 15c4.764 0 9.102 1.341 12 3.654-.539-7.243-7.533-13.654-15-13.654S-3.539 10.561-3 17.804zM12 10a4 4 0 100-8 4 4 0 000 8z"></path></svg>
        </a>
      </div>
    </div>
  </div>
</nav>

<script>
  // Dark Mode Toggle Logic
  const darkModeToggle = document.getElementById('dark-mode-toggle');
  const sunIcon = darkModeToggle.querySelector('.sun-icon');
  const moonIcon = darkModeToggle.querySelector('.moon-icon');

  function setDarkMode(isDark) {
    if (isDark) {
      document.documentElement.classList.add('dark');
      sunIcon.classList.add('hidden');
      moonIcon.classList.remove('hidden');
      localStorage.setItem('theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      sunIcon.classList.remove('hidden');
      moonIcon.classList.add('hidden');
      localStorage.setItem('theme', 'light');
    }
  }

  // Check for saved theme or system preference
  const preferredTheme = localStorage.getItem('theme');
  if (preferredTheme === 'dark' || (!preferredTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    setDarkMode(true);
  } else {
    setDarkMode(false);
  }

  darkModeToggle.addEventListener('click', () => {
    setDarkMode(!document.documentElement.classList.contains('dark'));
  });

  // Navbar Toggle Logic for Mobile
  const navbarToggle = document.getElementById('navbar-toggle');
  const navbarMenu = document.getElementById('navbar-menu');

  navbarToggle.addEventListener('click', () => {
    navbarMenu.classList.toggle('hidden');
    navbarMenu.classList.toggle('flex');
  });

  // Close mobile menu when a link is clicked
  navbarMenu.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
      if (!navbarMenu.classList.contains('hidden') && window.innerWidth < 768) { // Only close if mobile menu is open and on mobile size
        navbarMenu.classList.add('hidden');
        navbarMenu.classList.remove('flex');
      }
    });
  });

</script>

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

クリーンで信頼性が高く、応答性の高いスティッキーナビゲーションバーは、企業/専門の使用に適したパステルカラーの配色で設計されており、天気/気候アプリケーションに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <header class="w-full sticky top-0 z-50 shadow-md bg-white dark:bg-gray-800 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-2">
      <svg class="h-8 w-8 text-blue-400 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 005-5V7a4 4 0 00-4-4H9a5 5 0 00-5 5v2.5a.5.5 0 01-1 0V8a7 7 0 017-7h7a7 7 0 017 7v7a7 7 0 01-7 7h-7a7 7 0 01-7-7v-2.5a.5.5 0 011 0V15z" />
      </svg>
      <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">WeatherCentral</span>
    </div>

    <ul class="hidden md:flex space-x-6">
      <li><a href="#home" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Home</a></li>
      <li><a href="#forecast" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Forecast</a></li>
      <li><a href="#climate" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Climate Data</a></li>
      <li><a href="#maps" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">Maps</a></li>
      <li><a href="#about" class="text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 font-medium transition-colors duration-200">About</a></li>
    </ul>

    <button class="md:hidden focus:outline-none" aria-label="Toggle menu">
      <svg class="w-7 h-7 text-gray-600 dark:text-gray-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 12h16M4 18h16"></path></svg>
    </button>
  </nav>

  <!-- Mobile Menu (hidden by default, would be toggled with JS) -->
  <div class="md:hidden bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 py-2 hidden" id="mobile-menu">
    <ul class="flex flex-col space-y-2 px-4">
      <li><a href="#home" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Home</a></li>
      <li><a href="#forecast" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Forecast</a></li>
      <li><a href="#climate" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Climate Data</a></li>
      <li><a href="#maps" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">Maps</a></li>
      <li><a href="#about" class="block text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 py-2">About</a></li>
    </ul>
  </div>
</header>

Brutalist Sticky Navigation コンポーネント

ブルータリストのスティッキーナビゲーションバー(グレースケール)で、ダークモードをサポートするブログに対応

開けるプレビュー

                <nav class="bg-gray-900 border-b-4 border-gray-100 sticky top-0 z-50 font-mono">
  <div class="container mx-auto px-4 py-6 flex flex-wrap justify-between items-center">
    <div class="text-gray-100 text-4xl font-extrabold uppercase tracking-tighter">
      <a href="#" class="hover:text-gray-400 transition duration-300 ease-in-out">THE BLOG</a>
    </div>
    <div class="block lg:hidden">
      <button class="text-gray-100 focus:outline-none focus:text-gray-400">
        <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>
    <div class="w-full lg:w-auto lg:flex flex-grow lg:flex-grow-0 hidden lg:block mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8 text-xl font-bold uppercase">
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Home</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Articles</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="bg-gray-800 border-t-4 border-gray-100 py-3">
    <div class="container mx-auto px-4 flex flex-wrap justify-center lg:justify-between items-center text-gray-300 text-sm">
      <div class="tracking-wide mb-2 lg:mb-0">
        FEATURED TOPICS: <span class="font-bold">TECHNOLOGY / DESIGN / ART / CULTURE</span>
      </div>
      <div class="flex space-x-4">
        <input type="text" placeholder="SEARCH THE VOID..." class="px-3 py-1 bg-gray-700 text-gray-100 placeholder-gray-400 border-2 border-gray-100 focus:outline-none focus:border-gray-400 text-sm">
        <button class="bg-gray-600 text-gray-100 px-4 py-1 border-2 border-gray-100 hover:bg-gray-400 hover:text-gray-900 transition duration-300 ease-in-out">GO</button>
      </div>
    </div>
  </div>
</nav>

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

ブログ用のミニマリストでレスポンシブなスティッキーナビゲーションバーで、鮮やかな配色が特徴です。ダークモードをサポートし、左側に「ブログタイトル」、右側にナビゲーションリンクがあるシンプルですっきりとしたレイアウトになっています。ナビゲーションバーは、ユーザーがスクロールするとビューポートの上部に固定されます。

開けるプレビュー

                <nav class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-gray-800 dark:to-gray-900 p-4 shadow-md sticky top-0 z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Blog Title -->
    <a href="#" class="text-white text-2xl font-bold dark:text-gray-100">Blog Title</a>

    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Home</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Categories</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">About</a>
      <a href="#" class="text-white hover:text-gray-100 dark:text-gray-300 dark:hover:text-white transition duration-300 ease-in-out">Contact</a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default, can be shown with JS) -->
  <div class="md:hidden mt-4 space-y-2">
    <!-- Hidden for this pure HTML example as JS is not allowed -->
  </div>
</nav>

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

ミニマリストデザイン、トライアドカラースキーム、ダークテーマのサポートを備えたレスポンシブスティッキーナビゲーションコンポーネントで、ソーシャルメディアアプリケーションに適しています。

開けるプレビュー

                <nav class="sticky top-0 bg-white dark:bg-gray-800 p-4 shadow-md z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-blue-500 dark:text-blue-300 text-2xl font-bold">SocialLink</a>

    <!-- Navigation Links -->
    <div class="flex space-x-6">
      <a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Feed</a>
      <a href="#" class="text-violet-500 dark:text-violet-300 hover:text-violet-700 dark:hover:text-violet-500 transition duration-300">Profile</a>
      <a href="#" class="text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-500 transition duration-300">Messages</a>
      <a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Notifications</a>
    </div>

    <!-- Search Bar (Optional) -->
    <div class="hidden md:block">
      <input type="text" placeholder="Search..." class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <!-- User Avatar (Optional) -->
    <div class="flex items-center space-x-2">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-300">
      <span class="text-gray-700 dark:text-gray-300 hidden sm:block">John Doe</span>
    </div>
  </div>
</nav>

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

スキューモーフィックなデザイン、トライアドの配色、シンプルなレイアウトを備えたスティッキーナビゲーションコンポーネントで、ソーシャルメディアインターフェイスに適しています。レスポンシブデザインとダークテーマをサポートしています。

開けるプレビュー

                <nav class="fixed inset-x-0 top-0 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50 transform transition-transform duration-300 ease-in-out hover:-translate-y-1">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <!-- Home Button - Blue/Cyan -->
      <a href="#" class="flex items-center space-x-2 bg-gradient-to-br from-blue-500 to-cyan-400 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
        <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v9a1 1 0 01-1 1h-3m-6 0v-9"></path></svg>
        <span class="font-semibold hidden sm:inline">Home</span>
      </a>

      <!-- Notifications Button - Magenta/Pink -->
      <a href="#" class="relative flex items-center space-x-2 bg-gradient-to-br from-fuchsia-600 to-pink-500 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
        <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 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="font-semibold hidden sm:inline">Notifications</span>
        <span class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-white dark:border-gray-800">3</span>
      </a>

      <!-- Messages Button - Yellow/Orange -->
      <a href="#" class="relative flex items-center space-x-2 bg-gradient-to-br from-yellow-500 to-orange-400 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
        <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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
        <span class="font-semibold hidden sm:inline">Messages</span>
        <span class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-white dark:border-gray-800">1</span>
      </a>
    </div>

    <!-- User Avatar - Right side -->
    <div class="relative">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 shadow-md transform hover:scale-110 transition duration-300 ease-in-out cursor-pointer">
      <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-800 -mb-1 -mr-1"></div>
    </div>
  </div>
</nav>

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

Neumorphism デザイン、補色スキーム、適度な複雑さ、ダッシュボードのレスポンシブなダークテーマのサポートを備えたスティッキーナビゲーションコンポーネント。このデザインには、ニューモーフィズム効果のソフトシャドウが組み込まれており、補色を使用して視覚的に魅力的なインターフェイスを作成しています。データの視覚化とコントロールパネルを提供するダッシュボードに適しています。

開けるプレビュー

                <nav class="dark:bg-gray-800 dark:text-gray-200 bg-gray-200 text-gray-800 p-4 sticky top-0 z-50 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-2xl font-semibold">Dashboard</div>
    <ul class="flex space-x-6">
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Overview</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Analytics</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Reports</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Settings</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <img class="w-8 h-8 rounded-full"
        src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <button class="dark:text-gray-200 text-gray-800 focus:outline-none">
        <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 12H2m8.003-9.127a9.006 9.006 0 00-7.872 7.872m15.744 0A9.006 9.006 0 0112 21.003m-4.127-8.003a9.006 9.006 0 017.872-7.872m0 15.744a9.006 9.006 0 00-7.872-7.872"></path>
        </svg>
      </button>
    </div>
  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
    }
  </style>
</nav>

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

eコマース用のスティッキーナビゲーションコンポーネントで、鮮やかな色のミニマリスト/フラットなデザインが特徴です。ロゴ、検索バー、カートアイコン、ユーザーアバターが含まれており、すべてTailwind CSSでスタイル設定されており、応答性とダークテーマのサポートが可能です。

開けるプレビュー

                <nav class="sticky top-0 z-50 bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">YourStore</a>

    <!-- Search Bar (hidden on small screens, shown on medium and up) -->
    <div class="hidden md:flex items-center flex-grow mx-4 relative">
      <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-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
      <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 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>

    <!-- Navigation Icons -->
    <div class="flex items-center space-x-4">
      <!-- Cart Icon -->
      <a href="#" class="relative p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300">
        <svg class="w-6 h-6 text-gray-600 dark:text-gray-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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 4a2 2 0 11-4 0 2 2 0 014 0z"></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 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </a>

      <!-- User Avatar -->
      <a href="#" class="p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      </a>

      <!-- Mobile Menu Button (shown on small screens) -->
      <button class="md:hidden p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition duration-300">
        <svg class="w-6 h-6 text-gray-600 dark:text-gray-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 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Search Bar (shown on small screens, hidden on medium and up) -->
  <div class="md:hidden px-4 py-2">
    <div class="relative">
      <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-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
      <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 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>
  </div>
</nav>

ブログ用のレスポンシブなスティッキーナビゲーションバーで、グレースケールパレットを使用してスキューモーフィズムでスタイル付けされています。ダークモードのサポートとシンプルなレイアウトが特徴です。Tailwind CSS(HTMLのみ)で構築され、JavaScriptはありません。スキューモーフィックなデザインは、ナビゲーションバーを物理的でわずかに隆起した要素のように見せることを目的としています。

開けるプレビュー

                <nav class="sticky top-0 z-50 bg-gray-200 dark:bg-gray-800 border-b border-gray-300 dark:border-gray-700 shadow-[0_1px_0px_rgba(255,255,255,0.3)_inset,_0_1px_2px_rgba(0,0,0,0.2)] dark:shadow-[0_1px_0px_rgba(255,255,255,0.04)_inset,_0_1px_2px_rgba(0,0,0,0.5)]">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-xl font-semibold text-gray-800 dark:text-gray-100 hover:text-black dark:hover:text-white transition-colors duration-150">
          MySkeuoBlog
        </a>
      </div>

      <!-- Desktop Navigation Links -->
      <div class="hidden sm:flex sm:items-center sm:space-x-3 md:space-x-5">
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          Home
        </a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          Articles
        </a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          Categories
        </a>
        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-70 hover:text-gray-900 dark:hover:text-white transition-all duration-150 ease-in-out">
          About
        </a>
      </div>

      <!-- Mobile menu button (decorative as no JS for toggle) -->
      <div class="sm:hidden flex items-center">
        <button type="button" class="p-2 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-600" aria-label="Main menu" aria-expanded="false">
          <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

ブルータリズムスティッキーナビゲーション

ブルータリズムデザイン、単色の配色、ポートフォリオ用に設計された複雑なスティッキーナビゲーションコンポーネントで、レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが特徴です。

開けるプレビュー

                <header class="text-gray-600 dark:text-gray-400 body-font sticky top-0 z-50 bg-white dark:bg-gray-900 border-b-4 border-black dark:border-white">
  <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
    <a class="flex title-font font-medium items-center text-gray-900 dark:text-white mb-4 md:mb-0">
      <span class="text-xl border-4 border-black dark:border-white p-2 font-bold">BRUTALIST NAV</span>
    </a>
    <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center font-bold">
      <a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Home</a>
      <a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">About</a>
      <a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Portfolio</a>
      <a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Contact</a>
    </nav>
    <button class="inline-flex items-center bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white py-1 px-3 focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 text-base mt-4 md:mt-0 font-bold">
      Hire Me
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
        <path d="M5 12h14M12 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>
</header>