検索コンポーネント

カテゴリ

航海法

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

マテリアルデザインナビゲーションコンポーネント

グレースケールの配色を使用したソーシャルメディアインターフェース用のシンプルでレスポンシブなマテリアルデザインナビゲーションコンポーネント。ロゴ、ナビゲーションリンク、検索バー、ユーザーアバターを備えたすっきりとしたレイアウトが特徴です。Tailwind の dark: プレフィックスを使用したダークモードのサポートが含まれています。

開けるプレビュー

                <!-- Material Design Navigation Component for Social Media -->
<nav class="w-full bg-white dark:bg-gray-900 shadow-md transition-colors duration-200">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <!-- Logo and Brand -->
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <span class="text-gray-800 dark:text-white font-medium text-xl">SocialConnect</span>
        </div>
        
        <!-- Desktop Navigation Links -->
        <div class="hidden md:block ml-10">
          <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Home</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Explore</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Messages</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Notifications</a>
          </div>
        </div>
      </div>
      
      <!-- Search Bar -->
      <div class="hidden md:block flex-1 max-w-xs mx-4">
        <div class="relative">
          <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 dark:text-gray-400" 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"></path>
            </svg>
          </div>
          <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
        </div>
      </div>
      
      <!-- Right side - User profile and mobile menu button -->
      <div class="flex items-center">
        <!-- User Avatar -->
        <div class="ml-3 flex items-center">
          <div class="relative">
            <img class="h-8 w-8 rounded-full ring-2 ring-gray-200 dark:ring-gray-700" src="https://randomuser.me/api/portraits/women/72.jpg" alt="User avatar">
            <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-1 ring-white dark:ring-gray-800 bg-green-400"></span>
          </div>
        </div>
        
        <!-- Mobile menu button -->
        <button type="button" class="md:hidden ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors duration-200">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
    
    <!-- Mobile Search Bar (visible on mobile only) -->
    <div class="md:hidden py-2">
      <div class="relative">
        <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 dark:text-gray-400" 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"></path>
          </svg>
        </div>
        <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
      </div>
    </div>
  </div>
  
  <!-- Mobile Navigation Menu (hidden by default) -->
  <div class="hidden md:hidden bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Explore</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Messages</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Notifications</a>
    </div>
  </div>
</nav>

ニューモーフィズムナビゲーションコンポーネント

Neumorphism Navigation Componentは、PortfolioのWebサイト用に最適化されています。複数のインタラクティブ要素を備えた複雑なレイアウト、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートが特徴です。配色は類似です。

開けるプレビュー

                <nav class="p-6 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Your Name</span>
    </div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-400 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>
  <div class="mobile-menu hidden md:hidden mt-4 space-y-2">
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
  </div>
</nav>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
    .shadow-neumorphic-text-light {
    text-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
  }
     .dark .shadow-neumorphic-text-dark {
    text-shadow: 2px 2px 5px #333333, -2px -2px 5px #555555;
  }
</style>

ブルータリズムEコマースナビゲーション

Tailwind CSSで構築された、グレースケールの配色、複雑なレイアウト、応答性、ダークモードのサポートを特徴とする、eコマース用のブルータリズムスタイルのナビゲーションコンポーネント。

開けるプレビュー

                <nav class="bg-gray-900 text-white dark:bg-black dark:text-gray-100 p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="text-2xl font-bold uppercase border-2 border-white dark:border-gray-100 p-2">Store</div>
    <div class="block lg:hidden">
      <button id="menu-toggle" class="text-white dark:text-gray-100 focus:outline-none">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
    <div id="menu" class="w-full lg:flex lg:items-center lg:w-auto hidden lg:block mt-4 lg:mt-0">
      <ul class="uppercase text-sm lg:flex-grow">
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Home</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Shop</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0 mr-6"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Categories</a></li>
        <li class="block mt-4 lg:inline-block lg:mt-0"><a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Contact</a></li>
      </ul>
      <div class="flex items-center mt-4 lg:mt-0">
        <input type="text" placeholder="Search" class="p-2 text-black dark:text-white bg-white dark:bg-gray-800 border-2 border-white dark:border-gray-100 mr-4">
        <a href="#" class="block py-2 px-4 hover:bg-white hover:text-black border-2 border-transparent hover:border-white">Cart (0)</a>
      </div>
    </div>
  </div>
</nav>

<script>
  const menuToggle = document.getElementById('menu-toggle');
  const menu = document.getElementById('menu');

  menuToggle.addEventListener('click', () => {
    menu.classList.toggle('hidden');
  });
</script>

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

ポートフォリオ用に設計されたレスポンシブナビゲーションコンポーネントで、マイクロインタラクションとダークテーマのサポートを備えています。

開けるプレビュー

                <nav class="bg-gray-800 text-white dark:bg-gray-900 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Home</a>
            <a href="#portfolio" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Portfolio</a>
            <a href="#about" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">About</a>
            <a href="#contact" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Login</a>
            <a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Sign Up</a>
        </div>
    </div>
</nav>

<div class="bg-gray-100 text-black dark:bg-gray-800 dark:text-white">
    <div class="container mx-auto p-8">
        <h1 class="text-3xl font-bold mb-4">My Portfolio</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 1</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 2</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 3</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
        </div>
    </div>
</div>

ダッシュボードナビゲーション(マテリアルデザイン)

マテリアルデザインダッシュボードナビゲーションコンポーネントで、トライアドカラースキームとダークモードがサポートされています。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-800 shadow">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-gray-800 dark:text-white font-bold text-xl">Dashboard</div>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Home</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-teal-500 dark:hover:text-teal-400 transition duration-300">Analytics</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-red-500 dark:hover:text-red-400 transition duration-300">Settings</a>
      </div>
    </div>
  </div>
</nav>

レスポンシブナビゲーションコンポーネント

マイクロインタラクション、グレースケールの配色、シンプルな複雑さを備えたレスポンシブナビゲーションコンポーネント。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-800 shadow">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="relative flex items-center justify-between h-16">
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <!-- Mobile menu button-->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
           <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex-shrink-0">
          <span class="text-xl font-bold text-gray-900 dark:text-white">Logo</span>
        </div>
        <div class="hidden sm:block sm:ml-6">
          <div class="flex space-x-4">
            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>

            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>

            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>

            <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
          </div>
        </div>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
        <button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
          <span class="sr-only">View notifications</span>
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
          </svg>
        </button>

        <!-- Profile dropdown -->
        <div class="ml-3 relative">
          <div>
            <button type="button" class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>

      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>

      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>

      <a href="#" class="text-gray-900 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
    </div>
  </div>
</nav>

Retro Dashboard Navigation コンポーネント

ダッシュボード用のレトロ/ビンテージナビゲーションコンポーネントで、鮮やかな色、適度な複雑さ、応答性、ダークテーマのサポートを備えています。

開けるプレビュー

                <nav class='bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 p-4 text-white dark:from-purple-900 dark:via-pink-900 dark:to-red-900'>
  <div class='container mx-auto flex justify-between items-center'>
    <div class='text-2xl font-bold font-mono'>Dashboard</div>
    <ul class='flex space-x-4'>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Home</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Analytics</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Settings</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Profile</a></li>
    </ul>
  </div>
</nav>

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

ブログ/コンテンツの使用向けに設計されたレスポンシブナビゲーションコンポーネントで、3Dデザインスタイル、補色スキーム、およびいくつかのインタラクティブ機能を組み込んだ適度な複雑さを備えています。

開けるプレビュー

                <nav class="bg-gray-800 text-white shadow-lg p-4 dark:bg-gray-900">
    <div class="container mx-auto flex justify-between items-center">
        <div>
            <a href="#" class="text-xl font-bold hover:text-blue-400 transition duration-300">BlogLogo</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Home</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">About</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Blog</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Contact</a>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4 space-x-4">
        <input type="text" placeholder="Search..." class="bg-gray-700 text-white rounded-md px-3 py-2 w-full max-w-xs mr-2 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:focus:ring-blue-600" />
        <button class="bg-blue-500 text-white rounded-md px-3 py-2 transition duration-300 hover:bg-blue-600 dark:hover:bg-blue-700">Search</button>
    </div>
</nav>

<!-- Responsive Design -->
<div class="relative mt-10 p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-800">
            <img src="https://picsum.photos/500/300" alt="Blog Image" class="w-full h-48 object-cover rounded-md mb-4" />
            <h2 class="font-bold text-lg mb-2">Blog Post Title</h2>
            <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-800">
            <img src="https://picsum.photos/500/301" alt="Blog Image" class="w-full h-48 object-cover rounded-md mb-4" />
            <h2 class="font-bold text-lg mb-2">Blog Post Title</h2>
            <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        </div>
    </div>
</div>

<!-- Avatar Section -->
<div class="bg-gray-800 p-4 rounded-lg shadow-lg dark:bg-gray-900 mt-6">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500" />
        <div>
            <h3 class="text-lg font-bold text-white">Author Name</h3>
            <p class="text-gray-400">Author Bio or description goes here. Sharing insights and stories.</p>
        </div>
    </div>
</div>

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

マイクロインタラクションとパステルカラースキームを備えたブログ用に設計されたシンプルなナビゲーションコンポーネント。レスポンシブレイアウトとダークテーマのサポートが特徴です。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
            <span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
        </div>
        <ul class="flex space-x-6">
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
            </li>
        </ul>
    </div>
</nav>

ブルータリズムEコマースナビゲーションコンポーネント

Tailwind CSSを使用した複雑で残忍なeコマースナビゲーションコンポーネントで、ハイコントラスト(ブラック/ホワイト)のトライアドカラースキーム(イエロー、シアン、フクシア)、CSSのみのメガメニュー、CSSのみの検索表示、CSSのみのレスポンシブモバイルメニュー、ダークモードのサポートを備えています。HTMLのみ、JavaScriptは使用しません。

開けるプレビュー

                <nav class="bg-yellow-400 text-black border-b-8 border-black dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
  <div class="container mx-auto px-4 relative">

    <!-- Checkbox for Mobile Menu State - Controls the mobile menu visibility -->
    <input type="checkbox" id="mobile-menu-toggle" class="hidden peer">

    <!-- Main Row: Logo, Desktop Nav, Mobile Toggle Label -->
    <!-- This div is a sibling of the checkbox -->
    <div class="flex justify-between items-center py-6">

      <!-- Logo -->
      <div class="text-3xl font-black uppercase tracking-widest border-4 border-black p-2 dark:border-yellow-400">
        <a href="#" class="hover:text-fuchsia-500 transition duration-300">BRUTAL SHOP</a>
      </div>

      <!-- Desktop Navigation & Icons (Hidden on Mobile) -->
      <div class="hidden md:flex items-center space-x-8">
        <ul class="flex items-center space-x-8 uppercase font-bold">
          <!-- Categories with CSS-only Mega-Menu -->
          <li class="relative group">
            <a href="#" class="hover:text-fuchsia-500 focus:outline-none focus:text-fuchsia-500">Categories</a>
            <!-- Mega-Menu Content (CSS-only via group-hover) -->
            <div class="absolute left-0 top-full mt-2 w-64 bg-cyan-500 text-black p-6 border-4 border-black opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-10 dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
              <h4 class="font-black mb-3 border-b-4 border-black dark:border-cyan-500">Shop By Category</h4>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="hover:underline">Electronics</a></li>
                <li><a href="#" class="hover:underline">Apparel</a></li>
                <li><a href="#" class="hover:underline">Home Goods</a></li>
                <li><a href="#" class="hover:underline">Books</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#" class="hover:text-fuchsia-500">New Arrivals</a></li>
          <li><a href="#" class="hover:text-fuchsia-500">Deals</a></li>
        </ul>

        <!-- User Icons, Search, Cart -->
        <div class="flex items-center space-x-6 text-2xl">
           <!-- Search Toggle/Input (CSS-only reveal on hover/focus) -->
           <div class="relative group">
               <svg class="w-6 h-6 cursor-pointer hover:text-fuchsia-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
               <!-- Simple search input reveal on hover/focus -->
               <input type="text" placeholder="Search..." class="absolute right-0 top-full mt-2 px-3 py-2 w-48 border-4 border-black bg-white text-black opacity-0 invisible group-hover:opacity-100 group-hover:visible focus:opacity-100 focus:visible transition-all duration-300 z-10 dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
           </div>

           <!-- User Icon -->
           <a href="#" class="hover:text-fuchsia-500">
               <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
           </a>
           <!-- Wishlist Icon -->
           <a href="#" class="hover:text-fuchsia-500">
              <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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
           </a>
          <!-- Cart Icon with Count -->
          <a href="#" class="relative hover:text-fuchsia-500">
            <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="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 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            <span class="absolute -top-2 -right-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-yellow-400">3</span>
          </a>
        </div>
      </div>

      <!-- Mobile Menu Toggle Label (Visible on Mobile) -->
      <!-- This label controls the hidden checkbox peer -->
      <label for="mobile-menu-toggle" class="md:hidden block cursor-pointer p-2 relative z-20">
           <!-- Hamburger Icon - Spans styled based on the peer-checked state of the checkbox -->
           <div class="space-y-2 peer-checked:space-y-0 peer-checked:rotate-45 transition-transform duration-300">
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:rotate-90 peer-checked:translate-y-1.5 transition-transform duration-300"></span>
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:opacity-0 transition-opacity duration-300"></span>
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:-rotate-90 peer-checked:-translate-y-1.5 transition-transform duration-300"></span>
           </div>
      </label>
    </div>

    <!-- Mobile Menu Content -->
    <!-- This div is a sibling of the checkbox and the main row div -->
    <!-- Its visibility is controlled by the peer-checked state of the checkbox -->
    <div id="mobile-menu" class="md:hidden absolute top-[theme(spacing.20)] left-0 w-full bg-cyan-500 text-black border-t-8 border-black opacity-0 invisible transition-all duration-300 z-10 peer-checked:opacity-100 peer-checked:visible dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
      <div class="px-4 py-6 space-y-6">
         <!-- Search Input - Mobile -->
         <div>
            <input type="text" placeholder="Search..." class="px-3 py-2 w-full border-4 border-black bg-white text-black dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
         </div>
         <!-- Mobile Links -->
         <ul class="space-y-4 uppercase font-bold text-xl">
             <li><a href="#" class="block hover:text-fuchsia-500">Categories</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">New Arrivals</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Deals</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Account</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Wishlist</a></li>
             <li><a href="#" class="flex items-center hover:text-fuchsia-500">
                 Cart <span class="ml-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-cyan-500">3</span>
             </a></li>
         </ul>
      </div>
    </div>

  </div>
</nav>