메가 메뉴

레트로 메가 메뉴

반응형 효과와 어두운 테마를 지원하는 레트로/빈티지 스타일의 메가 메뉴 구성 요소로, 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'>

메가 메뉴 컴포넌트

Tailwind CSS를 사용하여 깊이 효과 및 어두운 테마 지원을 포함하여 3D 모양으로 디자인된 반응형 메가 메뉴 구성 요소입니다. 이 구성 요소는 자리 표시자 서비스의 이미지와 사용자 아바타를 특징으로 합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <div class="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
        <div class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mega Menu</div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
            Menu
        </button>
    </div>
    <div class="grid grid-cols-3 gap-4 p-4">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 1.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 2.</p>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out">
            <img src="https://picsum.photos/200/100?random=3" alt="Placeholder Image" class="rounded-md mb-2">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">Category 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description for category 3.</p>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">User Profiles</h4>
        <div class="flex flex-wrap">
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 1</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 2</span>
            </div>
            <div class="flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-2 mr-2 mb-2 shadow-md">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">User 3</span>
            </div>
        </div>
    </div>
</div>

레트로 빈티지 메가 메뉴

80년대와 90년대의 미학에서 영감을 받은 레트로/빈티지 스타일로 디자인된 반응형 메가 메뉴 구성 요소로, 어두운 테마 지원과 자리 표시자 이미지를 특징으로 합니다.

미리보기 열기

                <nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold">
      Retro Menu
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:text-gray-400 transition duration-200">Home</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">About</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Services</a>
      <a href="#" class="hover:text-gray-400 transition duration-200">Contact</a>
      <div class="relative group">
        <button class="hover:text-gray-400 transition duration-200">
          More
        </button>
        <div class="absolute left-0 hidden bg-gray-800 text-white group-hover:block transition duration-200 rounded shadow-lg">
          <div class="p-4">
            <h3 class="text-lg font-semibold">Categories</h3>
            <div class="flex flex-col mt-2 space-y-2">
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=1" alt="Category 1" class="rounded-full">
                <span>Category 1</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=2" alt="Category 2" class="rounded-full">
                <span>Category 2</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=3" alt="Category 3" class="rounded-full">
                <span>Category 3</span>
              </a>
              <a href="#" class="flex items-center space-x-2 hover:bg-gray-700 p-2 rounded transition duration-200">
                <img src="https://picsum.photos/40/40?random=4" alt="Category 4" class="rounded-full">
                <span>Category 4</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md:hidden">
      <button class="hover:text-gray-400 transition duration-200">
        Menu
      </button>
    </div>
  </div>
</nav>

<div class="bg-gray-100 dark:bg-gray-800">
  <div class="container mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Featured Items</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=5" alt="Featured Item 1" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 1</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=6" alt="Featured Item 2" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 2</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
      <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/400/300?random=7" alt="Featured Item 3" class="w-full">
        <div class="p-4">
          <h3 class="text-lg font-bold text-gray-900 dark:text-white">Featured Item 3</h3>
          <p class="text-gray-600 dark:text-gray-300">Description of the item goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a202c;
      color: white;
    }
  }
</style>

Neumorphic Mega 메뉴 컴포넌트

반응형 동작과 다크 모드를 지원하는 뉴모픽 메가 메뉴 구성 요소입니다.

미리보기 열기

                <nav class="neumorphic-mega-menu bg-gray-200 dark:bg-gray-800 transition duration-500 ease-in-out">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="text-xl font-bold text-gray-800 dark:text-white">My Logo</div>
    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
      <div class="group relative">
        <button class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Products</button>
        <div class="absolute left-0 mt-2 w-64 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transform scale-95 group-hover:scale-100 transition duration-300 ease-in-out">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 1</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 2</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 3</a>
        </div>
      </div>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
    </div>
    <button class="md:hidden text-gray-700 dark:text-gray-300 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 class="md:hidden mobile-menu hidden">
    <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">Home</a>
    <div class="group relative">
      <button class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 w-full text-left">Products</button>
      <div class="pl-4">
        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 1</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 2</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600">Category 3</a>
      </div>
    </div>
    <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">About</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">Contact</a>
  </div>
</nav>

<style>
.neumorphic-mega-menu {
  box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
}

.dark .neumorphic-mega-menu {
  box-shadow: 5px 5px 10px #444444, -5px -5px 10px #333333;
}
</style>

메가 메뉴 컴포넌트

Tailwind CSS로 디자인된 반응형 메가 메뉴 구성 요소로, 매력적인 애니메이션과 어두운 테마 지원을 위한 마이크로 인터랙션을 제공합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <div class="flex justify-between items-center">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Mega Menu</h2>
        <button class="focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 p-2 rounded-lg transition ease-in-out duration-300">Menu</button>
    </div>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 1</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=1" alt="Category 1" class="mt-4 rounded-lg w-full">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 2</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=2" alt="Category 2" class="mt-4 rounded-lg w-full">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden p-4 transition-transform transform hover:scale-105">
            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Category 3</h3>
            <ul class="mt-2">
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 1</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 2</a></li>
                <li class="my-2 hover:text-blue-500 dark:hover:text-blue-300 transition duration-200"><a href="#">Item 3</a></li>
            </ul>
            <img src="https://picsum.photos/200/150?random=3" alt="Category 3" class="mt-4 rounded-lg w-full">
        </div>
    </div>
    <div class="mt-6 border-t border-gray-300 dark:border-gray-600 pt-4">
        <h4 class="font-semibold text-gray-900 dark:text-white">Follow Us</h4>
        <div class="flex space-x-4 mt-2">
            <a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-8 h-8 rounded-full">
                <span>Profile 1</span>
            </a>
            <a href="#" class="flex items-center space-x-2 transition duration-200 hover:text-blue-500 dark:hover:text-blue-300">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-8 h-8 rounded-full">
                <span>Profile 2</span>
            </a>
        </div>
    </div>
</div>

메가 메뉴 컴포넌트

스큐어모피즘(Skeuomorphism)으로 스타일링된 반응형 메가 메뉴 컴포넌트로, 테일윈드 CSS를 사용하여 어두운 테마를 지원합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
    </div>
    <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"/>
      </svg>
    </button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6">
    <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
    <div class="flex space-x-4 mt-2">
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 1</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 2</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 3</span>
      </div>
    </div>
  </div>
</div>

미니멀리스트 메가 메뉴 구성 요소

반응형 효과와 어두운 테마 지원이 있는 미니멀리스트 메가 메뉴 구성 요소, JavaScript 없음.

미리보기 열기

                <nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex justify-between items-center">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-white">Logo</a>
      <div class="hidden lg:flex lg:items-center">
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Home</a>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Products</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Product 3</a>
          </div>
        </div>
        <div class="relative group">
          <button class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2 focus:outline-none">Services</button>
          <div class="absolute left-0 mt-0 w-64 bg-white dark:bg-gray-800 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 1</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 2</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700">Service 3</a>
          </div>
        </div>
        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-3 py-2">Contact</a>
      </div>
      <button class="lg:hidden text-gray-800 dark: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-4 6h4"></path>
        </svg>
      </button>
    </div>
    <div class="lg:hidden mt-3">
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Home</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Products</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Services</a>
      <a href="#" class="block text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 px-2 py-1">Contact</a>
    </div>
  </div>
</nav>

메가 메뉴 컴포넌트

Glassmorphism 스타일로 디자인된 반응형 메가 메뉴 컴포넌트로, 블러 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

미리보기 열기

                <div class="relative bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="absolute inset-0 bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 backdrop-blur-md"></div>
    <nav class="relative z-10">
        <div class="container mx-auto px-4 py-6">
            <div class="flex justify-between items-center">
                <div class="text-2xl font-bold text-gray-800 dark:text-white">Brand</div>
                <div class="hidden lg:flex space-x-8">
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Home</a>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">About</a>
                    <div class="relative group">
                        <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Services</a>
                        <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 rounded-lg shadow-lg group-hover:block">
                            <div class="p-4">
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Web Design</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">SEO Services</a>
                                <a href="#" class="block text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg p-2">Marketing</a>
                            </div>
                        </div>
                    </div>
                    <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Contact</a>
                </div>
                <div class="lg: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"/></svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>
    <div class="hidden lg:block relative overflow-hidden">
        <img class="object-cover w-full h-64 opacity-50" src="https://picsum.photos/800/400" alt="Mega Menu Background">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white bg-opacity-30 dark:bg-gray-900 dark:bg-opacity-50 p-6 rounded-lg shadow-lg">
                <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Welcome to Our Services</h2>
                <p class="text-gray-700 dark:text-gray-300 mt-2">Explore our range of services tailored for your business needs.</p>
                <a href="#" class="mt-4 inline-block bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow hover:bg-blue-600">Get Started</a>
            </div>
        </div>
    </div>
    <footer class="text-center py-4 bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-800 dark:text-white">© 2023 My Company</p>
    </footer>
</div>

메가 메뉴 컴포넌트

Tailwind CSS를 사용하여 스큐어모픽 스타일로 디자인된 반응형 메가 메뉴 구성 요소로, 다크 모드를 지원합니다.

미리보기 열기

                <div class="relative bg-white dark:bg-gray-800">
    <nav class="flex items-center justify-between p-4 shadow-lg">
        <div class="text-2xl font-bold text-gray-800 dark:text-white">My Website</div>
        <ul class="flex space-x-6">
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
            <li class="relative">
                <a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a>
                <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-700 shadow-lg rounded-lg transition duration-300 transform scale-95 hover:scale-100" id="menu">
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Web Design</h3>
                        <img src="https://picsum.photos/200/100?random=1" alt="Web Design" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Creating visually appealing websites.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">SEO Services</h3>
                        <img src="https://picsum.photos/200/100?random=2" alt="SEO Services" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Optimizing search engine results.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Marketing</h3>
                        <img src="https://picsum.photos/200/100?random=3" alt="Marketing" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Promoting your business effectively.</p>
                    </div>
                </div>
            </li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
        </ul>
    </nav>
    <div class="hidden md:block mt-4 p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Team Members</h2>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
        </div>
    </div>
</div>
<style>
    /* Dark mode styles */
    .dark .bg-gray-800 {
        background-color: #333;
    }
    .dark .text-gray-800 {
        color: #f7fafc;
    }
</style>

메가 메뉴 컴포넌트

Tailwind CSS를 사용하여 마이크로 인터랙션 및 어두운 테마 지원에 중점을 두고 설계된 반응형 메가 메뉴 구성 요소입니다.

미리보기 열기

                <div class="relative bg-white dark:bg-gray-800">
  <nav class="flex flex-col md:flex-row justify-between items-center p-4">
    <div class="flex items-center">
      <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Brand</a>
      <div class="hidden md:flex space-x-4 ml-8">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Home</a>
        <div class="relative group">
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">Services</a>
          <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-900 shadow-lg rounded-lg group-hover:block transition duration-150 ease-in-out">
            <ul class="py-2">
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Web Design</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">SEO</a></li>
              <li class="px-4 py-2 hover:bg-blue-100 dark:hover:bg-gray-700"><a href="#" class="block text-gray-800 dark:text-gray-300">Content Writing</a></li>
            </ul>
          </div>
        </div>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">About Us</a>
      </div>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 focus:outline-none hover:text-blue-500 dark:hover:text-blue-400 transition duration-150 ease-in-out">
        <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"/>
        </svg>
      </button>
    </div>
  </nav>

  <div class="mt-4 max-w-6xl mx-auto px-2">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service One</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Two</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Three</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
      <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 transition duration-150 ease-in-out hover:shadow-lg">
        <img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="rounded mb-4" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Service Four</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description of the service offered.</p>
      </div>
    </div>
  </div>
</div>

카테고리