검색 구성 요소

카테고리

메가 메뉴

여러 탐색 옵션을 표시하는 대형 드롭다운 패널

메가 메뉴 컴포넌트

Tailwind CSS를 사용하여 구축된 회색조 색 구성표가 있는 간단한 다크 모드 전자 상거래 메가 메뉴 구성 요소입니다. 반응형이며 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>

메가 메뉴 컴포넌트

Neumorphism 스타일의 Mega Menu Component는 블로그 및 콘텐츠 소비를 위해 설계된 단색 색 구성표를 사용합니다. 다크 모드로 반응형 디자인을 지원합니다.

열다 미리 보기

                <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 Mega Menu for Dashboard는 트라이어딕 색 구성표와 인터페이스합니다. 젖빛 유리 효과, 반응형 디자인, 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>

메가 메뉴 컴포넌트

반응형 Mega Menu Component는 비즈니스 및 기업 웹사이트를 위한 그레이스케일 색 구성표의 스큐어모픽 스타일로 설계되었습니다. 어두운 테마를 지원하고 스타일링에 Tailwind CSS를 사용합니다.

열다 미리 보기

                <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>

스큐어모피즘 소셜 미디어 메가 메뉴

스큐어모피즘 디자인, 트라이어딕 색 구성표 및 소셜 미디어 목적을 위한 단순 복잡성을 갖춘 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>