検索コンポーネント

カテゴリ

メガメニュー

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

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

Tailwind CSSを使用して構築された、グレースケールの配色を備えたシンプルなダークモードのeコマースメガメニューコンポーネント。これはレスポンシブであり、Tailwind の dark: プレフィックスを使用したダークテーマのサポートが含まれています。

開けるプレビュー

                <nav class="bg-gray-950 text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">ShopName</a>
    <div class="hidden md:flex space-x-6">
      <div class="relative group">
        <button class="hover:text-gray-300">Categories</button>
        <div class="absolute hidden group-hover:block bg-gray-900 shadow-lg mt-2 p-4 rounded-md w-48">
          <a href="#" class="block py-2 hover:bg-gray-800">Electronics</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Apparel</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Home Goods</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-300">New Arrivals</a>
      <a href="#" class="hover:text-gray-300">Sales</a>
      <a href="#" class="hover:text-gray-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 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

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

ダークモード UI でデザインされたレスポンシブなメガメニューコンポーネントで、ソーシャルメディアインターフェース用のグレースケールカラースキームを採用しています。

開けるプレビュー

                <div class="bg-gray-900 text-white p-5">
    <div class="container mx-auto">
        <div class="flex justify-between items-center">
            <h1 class="text-xl font-bold">Social Media</h1>
            <nav class="hidden md:flex space-x-4">
                <a href="#" class="hover:underline">Home</a>
                <a href="#" class="hover:underline">Profile</a>
                <a href="#" class="hover:underline">Messages</a>
                <a href="#" class="hover:underline">Settings</a>
            </nav>
            <div class="md:hidden cursor-pointer">
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white mb-1"></span>
                <span class="block w-6 h-1 bg-white"></span>
            </div>
        </div>
        <div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 1" class="rounded-lg mb-3">
                <p class="text-center">Title 1</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 2" class="rounded-lg mb-3">
                <p class="text-center">Title 2</p>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
                <img src="https://picsum.photos/200/150" alt="Image 3" class="rounded-lg mb-3">
                <p class="text-center">Title 3</p>
            </div>
        </div>
    </div>
</div>

<div class="bg-gray-800 text-gray-300 p-5">
    <div class="container mx-auto">
        <h2 class="text-lg font-semibold">User Profiles</h2>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 1</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 2</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User 3" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 3</p>
            </div>
            <div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User 4" class="rounded-full w-16 h-16 mb-3">
                <p class="text-center">User 4</p>
            </div>
        </div>
    </div>
</div>

ミニマリスト/フラットデザイン、鮮やかな配色、複雑な複雑さのレベルを備えたメガメニューコンポーネント、ダッシュボードの目的、Tailwind CSSを使用。ダークテーマをサポートするレスポンシブデザイン。JavaScript コードは不要で、Tailwind クラスを含む HTML のみ。ダークモードでは、スタイリングにTailwindのdark:プレフィックスを使用します。画像は picsum.photos を使用し、アバターには randomuser.me を使用します。

開けるプレビュー

                <nav class="bg-white shadow-lg dark:bg-gray-800">
    <div class="container mx-auto px-4">
        <div class="flex justify-between items-center py-4">
            <div>
                <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Dashboard</a>
            </div>
            <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Home</a>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Products</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
                    </div>
                </div>
                <div class="relative group">
                    <button class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Services</button>
                    <div class="absolute z-30 top-full left-0 w-64 rounded-md shadow-lg bg-white dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
                    </div>
                </div>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">About</a>
                <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 dark:text-gray-200 dark:hover:text-white">Contact</a>
            </div>
            <div class="md:hidden flex items-center">
                <button class="mobile-menu-button">
                    <svg class="w-6 h-6 text-gray-500 hover:text-green-500 dark:text-gray-200 dark:hover:text-green-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="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="mobile-menu hidden md:hidden bg-white dark:bg-gray-800">
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Home</a>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Products</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Product 3</a>
            </div>
        </div>
        <div class="relative group">
            <button class="block w-full text-left py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Services</button>
            <div class="relative bg-white dark:bg-gray-700">
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 1</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 2</a>
                <a href="#" class="block px-8 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Service 3</a>
            </div>
        </div>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700">Contact</a>
    </div>
</nav>

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

ブログやコンテンツの消費用に設計された単色の配色を備えたニューモーフィズムスタイルのメガメニューコンポーネント。ダークモードのレスポンシブデザインをサポートします。

開けるプレビュー

                <header class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
  <nav class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-8">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">About</a>
        <div class="relative group">
          <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 transition">Categories</button>
          <div class="absolute left-0 z-10 hidden w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg group-hover:block">
            <ul class="py-2">
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Web Development</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Design</a></li>
              <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">Marketing</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="hidden md:block">
      <a href="#" class="relative inline-block text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
      </a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
        <!-- Hamburger icon -->
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>
</header>

<main class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg mt-4">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Recent Posts</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=1" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=2" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=3" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 3</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/500/300?random=4" alt="Post Image" class="w-full h-32 rounded-lg object-cover">
      <h3 class="mt-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Post Title 4</h3>
      <p class="text-gray-600 dark:text-gray-400">A short description of the post content goes here to entice readers.</p>
    </div>
  </div>
</main>

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

ブログ/コンテンツ消費用に設計されたレスポンシブなメガメニューコンポーネントで、マイクロインタラクションとアーストーンの色に焦点を当て、Tailwind CSSを使用したダークモードをサポートしています。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 relative group">
    <div class="container mx-auto p-4">
        <nav class="flex justify-between items-center">
            <div class="text-2xl font-semibold text-brown-600 dark:text-green-200">
                Blog Title
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Home</a>
                <a href="#" class="relative transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Categories
                    <div class="absolute inset-x-0 bottom-0 h-0.5 bg-brown-600 dark:bg-green-200 transition duration-300 ease-in-out transform scale-x-0 group-hover:scale-x-100"></div>
                </a>
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">About</a>
                <a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Contact</a>
            </div>
            <div class="md:hidden">
                <button class="text-brown-600 dark:text-green-200 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" />
                    </svg>
                </button>
            </div>
        </nav>
    </div>
    <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-md mt-2 w-full rounded-lg overflow-hidden transition-opacity duration-300 ease-in-out">
        <div class="container mx-auto p-6">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Latest Posts</h2>
                    <ul class="space-y-2">
                        <li>
                            <a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
                                <img src="https://picsum.photos/50" alt="Post 1" class="h-10 w-10 rounded-full">
                                <span>Understanding Earth Tones in Design</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-2 transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">
                                <img src="https://picsum.photos/50" alt="Post 2" class="h-10 w-10 rounded-full">
                                <span>The Beauty of Nature-Inspired Living</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h2 class="font-bold text-lg text-brown-600 dark:text-green-200">Categories</h2>
                    <ul class="space-y-2">
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Lifestyle</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Travel</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Food</a></li>
                        <li><a href="#" class="transition duration-300 ease-in-out hover:text-brown-700 dark:hover:text-green-300">Wellness</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

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

ダッシュボードのGlassmorphismメガメニューは、トライアドの配色とインターフェースします。すりガラス効果、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートが特徴です。

開けるプレビュー

                <nav class="backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white py-4 px-6 sticky top-0 z-50 dark:bg-black dark:bg-opacity-30">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-xl font-bold text-blue-600 dark:text-blue-400">Dashboard</a>
        <div class="hidden md:flex space-x-6">
            <div class="relative group">
                <button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Data</button>
                <div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
                    <div class="grid grid-cols-2 gap-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Overview</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Reports</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Analytics</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Trends</a>
                    </div>
                </div>
            </div>
            <div class="relative group">
                <button class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 cursor-default">Management</button>
                <div class="absolute hidden group-hover:block backdrop-filter backdrop-blur-lg bg-opacity-30 bg-white p-6 rounded-lg shadow-lg mt-2 dark:bg-black dark:bg-opacity-30">
                    <div class="grid grid-cols-2 gap-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Users</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Permissions</a>
                    </div>
                </div>
            </div>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Settings</a>
            <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Help</a>
        </div>
        <button class="md:hidden text-gray-800 dark:text-gray-200 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 class="hidden md:hidden mobile-menu">
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Data</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Management</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
        <a href="#" class="block py-2 px-4 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Help</a>
    </div>
</nav>

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

ビジネスおよび企業のWebサイト向けのグレースケールカラースキームを備えたスキューモーフィックスタイルで設計されたレスポンシブなメガメニューコンポーネント。ダークテーマをサポートし、スタイリングにTailwindCSSを使用します。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=1" alt="Service 1" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Consulting</h3>
            <p class="text-gray-600 dark:text-gray-400">Professional consulting services to help you grow.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=2" alt="Service 2" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Marketing</h3>
            <p class="text-gray-600 dark:text-gray-400">Effective marketing strategies tailored to your needs.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow">
            <img src="https://picsum.photos/200/150?random=3" alt="Service 3" class="w-full h-32 object-cover rounded-md mb-2">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Support</h3>
            <p class="text-gray-600 dark:text-gray-400">24/7 support to assist with your queries.</p>
        </div>
    </div>
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mt-8">About Us</h2>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
        <p class="text-gray-600 dark:text-gray-400">Our team is dedicated to providing exceptional service and value.</p>
    </div>
</div>

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

ポートフォリオサイト用のニューモーフィックスタイルのメガメニューコンポーネントで、グレースケールの配色とTailwind CSSを使用したレスポンシブダークテーマのサポートで設計されています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-shadow duration-300">
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
        <button class="bg-gray-200 dark:bg-gray-700 rounded-full p-2 shadow-md transition-shadow duration-300 hover:shadow-lg dark:hover:shadow-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-8 h-8 rounded-full">
        </button>
    </div>
    <nav class="mt-6">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">About</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">Projects</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-300">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/150" alt="Project Image" class="w-full h-32 object-cover rounded-md mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/150?random=1" alt="Project Image" class="w-full h-32 object-cover rounded-md mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/150?random=2" alt="Project Image" class="w-full h-32 object-cover rounded-md mb-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the project.</p>
        </div>
    </div>
</div>

Skeuomorphismソーシャルメディアメガメニュー

Skeuomorphismデザイン、トライアドカラースキーム、およびソーシャルメディア目的のシンプルな複雑さを備えたMega Menuコンポーネント。ダークテーマのサポートによるレスポンシブ。

開けるプレビュー

                <nav class="bg-gray-200 dark:bg-gray-800 shadow-lg">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div class="text-gray-800 dark:text-white text-xl font-bold">SocialHub</div>
      <div class="hidden md:flex space-x-6">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Feed</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 transition duration-300">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300">Messages</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300">Notifications</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-gray-300 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-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

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

ブログやコンテンツの消費用に設計されたレスポンシブなメガメニューコンポーネントで、3Dデザイン要素とアースカラーが特徴で、ダークテーマがサポートされています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Categories</h2>
    <nav class="relative mt-4">
        <ul class="flex space-x-6">
            <li class="group relative">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 1</a>
                <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
                    <div class="p-4 space-y-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-1</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-2</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 1-3</a>
                    </div>
                </div>
            </li>
            <li class="group relative">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 2</a>
                <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
                    <div class="p-4 space-y-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-1</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-2</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 2-3</a>
                    </div>
                </div>
            </li>
            <li class="group relative">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-200 transition duration-150">Category 3</a>
                <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block">
                    <div class="p-4 space-y-4">
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-1</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-2</a>
                        <a href="#" class="block text-gray-800 dark:text-gray-200 hover:underline">Subcategory 3-3</a>
                    </div>
                </div>
            </li>
        </ul>
    </nav>
    <div class="mt-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Featured Posts</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
            <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
                <img src="https://picsum.photos/300/200" alt="Featured Post" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 1</h4>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
                <img src="https://picsum.photos/300/201" alt="Featured Post" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h4 class="font-semibold text-gray-800 dark:text-gray-200">Post Title 2</h4>
                    <p class="text-gray-600 dark:text-gray-400">Brief description of the post content...</p>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Authors</h3>
        <div class="flex space-x-4 mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
                <span class="text-gray-800 dark:text-gray-200">Author 1</span>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author" class="w-10 h-10 rounded-full">
                <span class="text-gray-800 dark:text-gray-200">Author 2</span>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author" class="w-10 h-10 rounded-full">
                <span class="text-gray-800 dark:text-gray-200">Author 3</span>
            </div>
        </div>
    </div>
</div>