検索コンポーネント

カテゴリ

メガメニュー

複数のナビゲーションオプションを表示する大きなドロップダウンパネル

メガメニューコンポーネント

ダークテーマをサポートする作品や製品を紹介するために設計されたミニマリストのメガメニューコンポーネント。

                <nav class="bg-white dark:bg-gray-800 shadow-md">
    <div class="max-w-screen-xl mx-auto px-4 py-2 flex justify-between items-center">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
        <div class="relative">
            <button class="text-gray-700 dark:text-gray-300 focus:outline-none">
                Menu
            </button>
            <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg mt-2 transition-opacity ease-in-out duration-200">
                <div class="grid grid-cols-3 gap-4 p-4">
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 1</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
                    </div>
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 2</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
                    </div>
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">More</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<section class="bg-gray-100 dark:bg-gray-900 py-10">
    <div class="max-w-screen-xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Featured Works</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Work 1">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Work 2">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Work 3">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
        </div>
    </div>
</section>

メガメニューコンポーネント

ブログ/コンテンツ Web サイト用のニューモーフィズムスタイルのメガメニューコンポーネントで、類似の配色と中程度の複雑さを使用します。ダークテーマをサポートするレスポンシブデザイン。JavaScript はありません。

開けるプレビュー

                <nav class="bg-gray-200 dark:bg-gray-800 transition-colors duration-300 ease-in-out">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <span class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Name</span>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Home</a>
                        <div class="relative group">
                            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Categories</button>
                            <div class="absolute z-10 left-0 mt-2 w-60 bg-gray-200 dark:bg-gray-700 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-300 ease-in-out neu">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Technology</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Travel</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Food</a>
                            </div>
                        </div>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">About</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Contact</a>
                    </div>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 neu neu-pressed">
                    <span class="sr-only">Open main menu</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Home</a>
            <div class="group">
                <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left neu neu-pressed">Categories</button>
                <div class="pl-4 mt-2 space-y-1">
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Technology</a>
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Travel</a>
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Food</a>
                </div>
            </div>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Contact</a>
        </div>
    </div>

    <style>
        .neu {
            box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
        }
        .dark .neu {
            box-shadow: 5px 5px 10px #4b4b4b, -5px -5px 10px #333333;
        }
        .neu-pressed {
             box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
        }
        .dark .neu-pressed {
            box-shadow: inset 5px 5px 10px #4b4b4b, inset -5px -5px 10px #333333;
        }
    </style>
</nav>

シンプルなダークモードメガメニュー

補完的な配色を備えたダークモードを使用するビジネスWebサイト向けのシンプルでレスポンシブなメガメニューコンポーネント。Tailwind CSSで構築され、ダークテーマのサポートとJavaScriptなしを特徴としています。

開けるプレビュー

                <header class="bg-gray-900 text-gray-300">
  <nav class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <a href="#" class="text-xl font-bold text-white">Your Logo</a>
      <div class="hidden md:flex space-x-8">
        <div class="relative group">
          <button class="hover:text-white">Menu 1</button>
          <div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-bold text-white mb-2">Category 1</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link 1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link 2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link 3</a></li>
                </ul>
              </div>
              <div>
                <h3 class="font-bold text-white mb-2">Category 2</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link A</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link B</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link C</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="relative group">
          <button class="hover:text-white">Menu 2</button>
          <div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-bold text-white mb-2">Category X</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link X1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link X2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link X3</a></li>
                </ul>
              </div>
              <div>
                <h3 class="font-bold text-white mb-2">Category Y</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link Y1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link Y2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link Y3</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="hover:text-white">About</a>
        <a href="#" class="hover:text-white">Contact</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-300 hover:text-white focus:outline-none">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
</header>

メガメニューコンポーネント

ダッシュボード用のGlassmorphismスタイル、単色の配色、複雑な複雑さのレベルを備えたメガメニューコンポーネント。ダークテーマをサポートするレスポンシブデザイン。Tailwind CSSを使用します。JavaScript コードは必要ありません。

開けるプレビュー

                <div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-700 text-white dark:bg-gray-800 dark:bg-opacity-30 p-6 rounded-lg shadow-xl w-full max-w-6xl mx-auto mt-10">
  <div class="flex justify-between items-center border-b border-gray-600 dark:border-gray-700 pb-4">
    <h2 class="text-2xl font-semibold">Dashboard Navigation</h2>
    <button class="text-gray-300 hover:text-white focus:outline-none">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>
  <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Overview</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Dashboard Home</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Analytics</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Reporting</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Management</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Users</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Settings</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Permissions</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Projects</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Active Projects</a></li>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Archived Projects</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Add New Project</a></li>
      </ul>
    </div>
    <div class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-gray-600 dark:bg-gray-700 dark:bg-opacity-40 p-4 rounded-md">
      <h3 class="font-bold text-lg mb-2">Support</h3>
      <ul>
        <li class="mb-2"><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">Contact Us</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6 border-t border-gray-600 dark:border-gray-700 pt-4 flex justify-between items-center">
    <div>
      <p class="text-gray-400 text-sm">Last updated: Today</p>
    </div>
    <div>
      <img class="h-8 w-8 rounded-full ring-2 ring-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    </div>
  </div>
</div>

メガメニューコンポーネント

マテリアルデザイン、トライアドカラースキーム、複雑なレベル、ダッシュボード用、ダークテーマのサポートによるレスポンシブを備えたメガメニューコンポーネント。

開けるプレビュー

                <nav class="bg-gray-100 dark:bg-gray-900 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div>
        <a href="#" class="text-gray-800 dark:text-white text-xl font-bold">Dashboard</a>
      </div>
      <div class="hidden md:flex space-x-4">
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Analytics</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Overview</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Reports</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Data Sources</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Users</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Manage Users</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Roles & Permissions</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">Settings</button>
          <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 rounded-md p-4">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">General Settings</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 py-1">Billing</a>
          </div>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-800 dark: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 12h16m-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

メガメニューコンポーネント

3Dデザイン、類似の配色、ダークモードをサポートするレスポンシブな追い風CSSメガメニュー

開けるプレビュー

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 shadow-xl">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-white text-2xl font-bold">BlogName</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-white hover:text-gray-200 transition duration-300">Categories</button>
        <div class="absolute z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-6 mt-2 transition duration-300 transform translate-y-2 opacity-0 group-hover:opacity-100 group-hover:translate-y-0" style="perspective: 1000px;">
          <div class="grid grid-cols-2 gap-4" style="transform: rotateY(0deg);">
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
            </div>
            <div class="space-y-2">
              <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
              <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">About</a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300">Contact</a>
    </div>
    <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) -->
  <div class="mobile-menu hidden md:hidden bg-gradient-to-r from-purple-400 via-pink-400 to-red-400 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 py-4 px-4">
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Home</a>
    <div class="relative group">
      <button class="block text-white hover:text-gray-200 transition duration-300 py-2">Categories</button>
      <div class="relative z-10 invisible group-hover:visible bg-white dark:bg-gray-700 shadow-lg rounded-md p-4 mt-2 transition duration-300">
        <div class="grid grid-cols-1 gap-2">
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Technology</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Lifestyle</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Travel</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 transition duration-300">Food</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-300">Fashion</a>
          <a href="#" class="block text-gray-800 dark:text-white hover:text-red-600 dark:hover:text-red-400 transition duration-300">Sports</a>
        </div>
      </div>
    </div>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">About</a>
    <a href="#" class="block text-white hover:text-gray-200 transition duration-300 py-2">Contact</a>
  </div>
</nav>

メガメニューコンポーネント

ブルータリズムのデザインスタイルのメガメニューコンポーネントで、単色の配色とブログやコンテンツプラットフォームに適したレスポンシブデザインが特徴です。

開けるプレビュー

                <div class="bg-gray-900 text-gray-100 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-3xl font-bold">My Blog</h1>
    <button class="text-gray-100 hover:text-gray-300">Menu</button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 1</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 2</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold">Category 3</h2>
      <ul class="list-disc list-inside">
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 1</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 2</a></li>
        <li class="mt-2"><a href="#" class="hover:text-gray-300">Post 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-8 flex justify-evenly">
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg w-1/4">
      <img src="https://picsum.photos/200/300?random" alt="Random Image" class="rounded-lg mb-2"/>
      <p class="text-lg">Featured Image</p>
    </div>
  </div>
  <div class="text-center mt-4">
    <p class="text-sm">© 2023 My Blog. All rights reserved.</p>
  </div>
</div>

ブルータリズムメガメニュー

ブルータリズムデザインのレスポンシブメガメニューコンポーネントで、アースカラーとブログやコンテンツ駆動型のWebサイト向けのダークモードのサポートが特徴です。

開けるプレビュー

                <div class="bg-brown-900 dark:bg-gray-800 p-6">
    <div class="max-w-7xl mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-white text-2xl font-bold">Blog</div>
            <nav class="mt-4 md:mt-0">
                <ul class="flex flex-col md:flex-row space-x-0 md:space-x-8">
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Home</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">About</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Categories</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=1" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 1</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=2" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 2</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=3" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 3</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
        </div>
    </div>
</div>

メガメニューコンポーネント

ダークモードをサポートするMega Menuコンポーネント

開けるプレビュー

                <nav class="bg-gray-900 shadow-lg">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-4">
            <a href="#" class="text-white text-xl font-bold">Logo</a>
            <div class="hidden md:flex md:items-center md:space-x-4">
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Home</a>
                <div class="relative group">
                    <button class="text-gray-300 hover:text-white transition duration-300">Products</button>
                    <div class="absolute z-10 hidden group-hover:block bg-gray-800 shadow-lg mt-2 rounded-md">
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-gray-300 hover:text-white">Product 3</a>
                    </div>
                </div>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">About</a>
                <a href="#" class="text-gray-300 hover:text-white transition duration-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-gray-300 hover:text-white 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>
    </div>
</nav>

レトロなメガメニュー

レスポンシブエフェクトとダークテーマのサポートを備えたレトロ/ビンテージスタイルのメガメニューコンポーネントで、Tailwind CSSを使用して実装されています。JavaScriptは含まれていません。ダークモードは純粋にCSSで処理されます。

開けるプレビュー

                <'nav' class="bg-gray-800 text-retro-yellow font-retro-sans">
  <'div' class="container mx-auto px-4 sm:px-6 lg:px-8">
    <'div' class="flex items-center justify-between h-16">
      <'div' class="flex items-center">
        <'div' class="flex-shrink-0">
          <'h1' class="text-2xl font-bold">RetroShop<'/h1'>
        <'/div'>
        <'div' class="hidden md:block">
          <'div' class="ml-10 flex items-baseline space-x-4">
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home<'/a'>
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Products<'/a'>
            <'div' class="relative group">
              <'button' class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium focus:outline-none">Categories <'/button'>
              <'div' class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2 invisible group-hover:visible">
                <'div' class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                  <'div' class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro1/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Electronics<'/p'>
                      <'/div'>
                    <'/a'>
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro2/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Apparel<'/p'>
                      <'/div'>
                    <'/a'>
                    <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">
                      <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro3/20/20" alt="">
                      <'div' class="ml-4">
                        <'p' class="text-base font-medium text-gray-900">Home Goods<'/p'>
                      <'/div'>
                    <'/a'>
                  <'/div'>
                <'/div'>
              <'/div'>
            <'/div'>
            <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact<'/a'>
          <'/div'>
        <'/div'>
      <'/div'>
      <'div' class="-mr-2 flex md:hidden">
        <'button' type="button" class="bg-gray-800 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-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <'span' class="sr-only">Open main menu<'/span'>
          <'!-- Icon when menu is closed. -->
          <'!--
            Heroicon name: outline/menu

            Menu open: "hidden", Menu closed: "block"
          -->
          <'svg' class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <'path' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          <'/svg'>
          <'!-- Icon when menu is open. -->
          <'!--
            Heroicon name: outline/x

            Menu open: "block", Menu closed: "hidden"
          -->
          <'svg' class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <'path' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          <'/svg'>
        <'/button'>
      <'/div'>
    <'/div'>
  <'/div'>

  <'!-- Mobile menu, show/hide based on menu state. -->
  <'div' class="md:hidden" id="mobile-menu">
    <'div' class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home<'/a'>
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Products<'/a'>
      <'div' class="group">
        <'button' class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium w-full text-left focus:outline-none">Categories <'/button'>
        <'div' class="pt-2 pb-3 space-y-1 px-5 invisible group-focus:visible">
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Electronics<'/a'>
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Apparel<'/a'>
          <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home Goods<'/a'>
        <'/div'>
      <'/div'>
      <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact<'/a'>
    <'/div'>
  <'/div'>
<'/nav'>