검색 구성 요소

카테고리

구성 요소 드롭다운 메뉴

드롭다운 메뉴

클릭하거나 마우스를 가져갈 때 나타나는 하위 메뉴Sub-menus that appear when clicked or hovered

Neumorphism Earth Tone 드롭다운 메뉴

흙색의 뉴모피즘(Neumorphism) 스타일의 드롭다운 메뉴로, 전자상거래에 적합합니다. 반응형이며 Tailwind CSS를 통한 어두운 테마 지원이 포함됩니다. JavaScript는 사용되지 않으며 다크 모드 변형을 포함하여 스타일링을 위한 HTML 및 Tailwind 유틸리티 클래스만 사용됩니다.

열다 미리 보기

                <div class="p-8 bg-gradient-to-br from-stone-200 to-stone-400 min-h-screen dark:from-stone-800 dark:to-stone-900 flex items-start justify-center font-sans">
  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark px-6 py-3 bg-gradient-to-br from-stone-300 to-stone-200 dark:from-stone-700 dark:to-stone-800 text-stone-700 dark:text-stone-300 text-lg font-medium hover:from-stone-400 hover:to-stone-300 dark:hover:from-stone-600 dark:hover:to-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-stone-100 focus:ring-stone-500 transition-all duration-300" id="options-menu" aria-haspopup="true" aria-expanded="true">
        Product Categories
        <svg class="-mr-1 ml-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- Dropdown panel, show/hide based on menu state. -->
    <div class="origin-top-right absolute right-0 mt-4 w-72 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gradient-to-br from-stone-300 to-stone-200 dark:from-stone-700 dark:to-stone-800 ring-1 ring-black ring-opacity-5 focus:outline-none opacity-100 scale-100 transition-all duration-300 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <div class="py-2" role="none">
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Electronics</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Apparel</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Home Goods</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Books & Media</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Sports & Outdoors</a>
      </div>
    </div>
  </div>
</div>

<!-- Tailwind CSS Neumorphic Shadow Utility Classes -->
<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a8a8a8, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
  }
  @media (max-width: 640px) {
    .max-w-xs {
      max-width: 20rem; /* 320px */
    }
  }
  @media (min-width: 641px) and (max-width: 768px) {
    .sm\:max-w-md {
      max-width: 28rem; /* 448px */
    }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .md\:max-w-lg {
      max-width: 32rem; /* 512px */
    }
  }
  @media (min-width: 1025px) {
    .lg\:max-w-xl {
      max-width: 36rem; /* 576px */
    }
  }
</style>

Neumorphic 드롭다운 메뉴(그레이스케일)

그레이스케일 색상이 있는 Neumorphic 드롭다운 메뉴. 포트폴리오 사용을 위한 간단한 레이아웃, 다크 모드 지원으로 반응형. 자바스크립트가 없습니다.

열다 미리 보기

                <div class="dark:bg-gray-900 bg-gray-200 min-h-screen flex items-center justify-center font-sans">

  <!-- Dropdown container -->
  <div class="relative inline-block text-left">

    <!-- Dropdown toggle button -->
    <button type="button" class="inline-flex justify-center w-full rounded-md dark:bg-gray-800 dark:text-gray-300 dark:shadow-2xl dark:hover:bg-gray-700 bg-gray-300 px-4 py-2 text-sm font-medium text-gray-700 shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-gray-500" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>

    <!-- Dropdown menu (hidden by default) -->
    <div class="absolute right-0 mt-2 w-56 origin-top-right rounded-md dark:bg-gray-800 dark:shadow-2xl bg-gray-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Menu Item -->
        <a href="#" class="block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-0">My Work</a>
        <a href="#" class="block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-1">About Me</a>
        <a href="#" class="block px-4 py-2 text-sm dark:text-gray-300 dark:hover:bg-gray-700 text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="menu-item-2">Contact</a>
      </div>
    </div>
  </div>
</div>

드롭다운 메뉴 컴포넌트

소셜 미디어 인터페이스를 위한 반응형 드롭다운 메뉴 구성 요소로, 어두운 테마와 파스텔 색 구성표가 있습니다. 눈의 피로를 줄이기 위해 설계된 여러 대화형 요소가 있는 복잡한 구성 요소입니다.

열다 미리 보기

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900" id="options-menu" aria-haspopup="true" aria-expanded="true">
        Options
        <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <div class="py-1">
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">
          <div class="flex items-center">
            <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
            <span>Profile</span>
          </div>
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">
          <div class="flex items-center">
            <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
            <span>Friends</span>
          </div>
        </a>
      </div>
      <div class="py-1">
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Settings</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Notifications
          <span class="inline-flex items-center justify-center px-2 py-0.5 ml-2 text-xs font-semibold leading-none text-red-100 dark:text-red-800 bg-red-600 dark:bg-red-200 rounded-full">3</span>
        </a>
      </div>
      <div class="py-1">
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Share Post</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Logout</a>
      </div>
    </div>
  </div>
</div>

드롭다운 메뉴 컴포넌트

머티리얼 디자인 원칙에 따라 설계된 반응형 드롭다운 메뉴 구성 요소로, 어두운 테마를 지원하고 보색 구성표를 사용합니다. 블로그 및 콘텐츠 소비에 적합합니다.

열다 미리 보기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="flex rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 focus:outline-none dark:bg-blue-800 dark:hover:bg-blue-700" aria-haspopup="true" aria-expanded="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0l4.47 4.47 4.47-4.47a.75.75 0 111.06 1.06l-5 5a.75.75 0 01-1.06 0l-5-5a.75.75 0 010-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="hidden origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">License</a>
      <div class="border-t border-gray-100 dark:border-gray-700"></div>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<div class="p-2">
  <img src="https://picsum.photos/200/100" alt="Example Image" class="rounded-md shadow-md">
</div>
<div class="p-2">
  <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-blue-600 dark:border-blue-800">
</div>

드롭다운 메뉴 컴포넌트

비즈니스/기업용으로 설계된 반응형 드롭다운 메뉴 구성 요소로, 마이크로 인터랙션과 보색을 특징으로 합니다. 밝은 테마와 어두운 테마를 모두 지원하며 스타일링에 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-400" aria-haspopup="true" aria-expanded="true" aria-controls="options" id="options-button">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.354l3.71-3.144a.75.75 0 111.04 1.083l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.083z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute z-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Edit</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Duplicate</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Delete</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 dark:text-gray-300 block w-full text-left px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Archive</button>
      </form>
    </div>
  </div>
</div>

드롭다운 메뉴 컴포넌트

다크 모드를 지원하는 반응형 드롭다운 메뉴 구성 요소

열다 미리 보기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-700 dark:focus:ring-blue-600" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

3D 드롭다운 메뉴 컴포넌트

포트폴리오 전시를 위해 설계된 생생한 색 구성표가 있는 반응형 드롭다운 메뉴 구성 요소입니다. 다크 모드에 적합한 인터랙티브 요소가 있는 3D 디자인이 특징입니다.

열다 미리 보기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-between items-center w-full rounded-lg border border-transparent shadow-lg px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gradient-to-r from-blue-700 to-purple-700" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Menu
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.47l3.71-3.26a.75.75 0 111.04 1.14l-4.25 3.67a.75.75 0 01-1.04 0l-4.25-3.67a.75.75 0 010-1.14z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <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-700" role="menuitem">Portfolio Item 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-700" role="menuitem">Portfolio Item 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-700" role="menuitem">Portfolio Item 3</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-700" role="menuitem">Portfolio Item 4</a>
    </div>
  </div>
</div>

레트로/빈티지 드롭다운 메뉴

레트로/빈티지 미학으로 전자 상거래를 위해 설계된 복잡한 드롭다운 메뉴 구성 요소로, 단색 색상, 풍부한 인터페이스, 다크 모드 지원을 포함한 반응형 디자인을 특징으로 합니다.

열다 미리 보기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-gray-800 text-sm font-medium text-gray-200 hover:bg-gray-700 focus:outline-none dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" aria-haspopup="true" aria-expanded="true" aria-controls="headlessui-menu-items-117">
      Dropdown
      <!-- Heroicon name: mini/chevron-down -->
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
      </svg>
    </button>
  </div>

  <div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 dark:bg-gray-900" role="menu" aria-orientation="vertical" aria-labelledby="headlessui-menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-200 block px-4 py-2 text-sm hover:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" role="menuitem">Option 1</a>
      <a href="#" class="text-gray-200 block px-4 py-2 text-sm hover:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" role="menuitem">Option 2</a>
      <a href="#" class="text-gray-200 block px-4 py-2 text-sm hover:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" role="menuitem">Option 3</a>
      <div class="border-t border-gray-600"></div>
      <a href="#" class="text-gray-200 block px-4 py-2 text-sm hover:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" role="menuitem">Option 4</a>
      <div class="flex items-center justify-between px-4 py-2">
        <span class="text-gray-200 text-sm">Profile</span>
        <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</div>

<div class="p-4">
  <h2 class="text-white text-lg font-semibold">Featured Products</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-4">
    <div class="bg-gray-700 rounded-lg p-4">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Product 1">
      <h3 class="text-gray-200 mt-2">Product 1</h3>
      <span class="text-gray-400">$29.99</span>
    </div>
    <div class="bg-gray-700 rounded-lg p-4">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Product 2">
      <h3 class="text-gray-200 mt-2">Product 2</h3>
      <span class="text-gray-400">$39.99</span>
    </div>
    <div class="bg-gray-700 rounded-lg p-4">
      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Product 3">
      <h3 class="text-gray-200 mt-2">Product 3</h3>
      <span class="text-gray-400">$49.99</span>
    </div>
  </div>
</div>

드롭다운 메뉴 컴포넌트

glassmorphism으로 스타일이 지정된 반응형 드롭다운 메뉴 구성 요소로, 블로그 또는 콘텐츠 소비에 적합하며 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="flex items-center justify-between w-full rounded-md border border-transparent bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-50 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-opacity-40 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown-menu">
      Menu
      <svg class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="hidden z-10 mt-2 w-56 rounded-md shadow-lg bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-50 ring-1 ring-black ring-opacity-5" id="dropdown-menu" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700" role="menuitem">Profile</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700" role="menuitem">Settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<div class="mt-8 flex items-center justify-center">
  <div class="relative w-16 h-16 rounded-full overflow-hidden bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-50">
    <img src="https://picsum.photos/seed/picsum/200/200" alt="Random" class="object-cover w-full h-full rounded-full">
  </div>
</div>

드롭다운 메뉴 컴포넌트

마이크로 인터랙션, 유사한 색 구성표 및 어두운 테마 지원으로 설계된 반응형 드롭다운 메뉴 구성 요소는 포트폴리오 웹 사이트에 적합합니다.

열다 미리 보기

                <div class="relative inline-block text-left">
  <div>
    <button class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-gray-800 text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="options-menu" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.29l3.71-3.08a.75.75 0 111 1.14l-4.25 3.5a.75.75 0 01-1 0l-4.25-3.5a.75.75 0 010-1.14z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-800 dark:ring-white dark:ring-opacity-20" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 block px-4 py-2 text-sm" role="menuitem">Your Profile</a>
      <a href="#" class="text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 block px-4 py-2 text-sm" role="menuitem">Settings</a>
      <a href="#" class="text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 block px-4 py-2 text-sm" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<!-- Microinteraction to show hover effect -->
<style>
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.hover-effect:hover {
  animation: fadeIn 0.3s;
}
</style>

<div class="hover-effect">
  <img class="w-full h-48 rounded-md object-cover" src="https://picsum.photos/id/1018/400/300" alt="Portfolio Image">
</div>