검색 구성 요소

카테고리

구성 요소 드롭다운 메뉴

드롭다운 메뉴

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

Glassmorphism 드롭다운 메뉴

기술/SaaS 애플리케이션에 적합한 자주색/보라색 톤을 사용하는 glassmorphism 디자인의 간단하고 반응이 빠른 드롭다운 메뉴입니다. 다크 모드를 지원합니다.

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-sm font-medium text-white hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gradient-to-r dark:from-purple-700 dark:to-indigo-800 dark:hover:from-purple-800 dark:hover:to-indigo-900 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-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>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform transition ease-out duration-200 scale-100 opacity-100" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1 rounded-md bg-white/30 backdrop-blur-lg border border-white/40 dark:bg-gray-800/30 dark:border-gray-700/40" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">
        Account settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">
        Support
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">
        License
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-red-100 hover:text-red-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-red-900 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

드롭다운 메뉴 컴포넌트

이벤트 및 컨퍼런스 웹 사이트를 위한 깔끔하고 미니멀한 드롭다운 메뉴로, 포레스트 그린 색상 팔레트와 스위스/국제 타이포그래피에서 영감을 받은 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.

열다 미리 보기

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-current 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-green-500 dark:focus:ring-offset-gray-900 dark:focus:ring-green-400" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Event Sessions
      <!-- Heroicon name: solid/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>

  <!--
    Dropdown panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <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 focus:outline-none" 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-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Keynote Speakers</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Panel Discussions</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Workshops</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Networking Events</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">View Full Schedule</a>
    </div>
  </div>
</div>

금융을 위한 Luxury 드롭다운 메뉴

금융 및 은행 인터페이스를 위해 설계된 우아하고 반응이 빠른 드롭다운 메뉴 구성 요소로, 미묘한 악센트가 있는 흑백 색 구성표, 다크 모드 지원 및 세련된 타이포그래피를 특징으로 합니다. 데스크톱, 태블릿 및 모바일 보기와 호환됩니다.

열다 미리 보기

                <div class="relative inline-block text-left font-serif">
  <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 dark:focus:ring-indigo-600 transition duration-150 ease-in-out" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Accounts & Services
      <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>

  <!--
    Dropdown panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <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 focus:outline-none z-10 hidden" 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-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-credit-card mr-2 text-gray-500 dark:text-gray-400"></i> Checking Accounts
      </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 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-piggy-bank mr-2 text-gray-500 dark:text-gray-400"></i> Savings Accounts
      </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 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-hand-holding-usd mr-2 text-gray-500 dark:text-gray-400"></i> Loans & Credit
      </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-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-chart-line mr-2 text-gray-500 dark:text-gray-400"></i> Investments
      </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 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-wallet mr-2 text-gray-500 dark:text-gray-400"></i> Online Banking
      </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-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-headset mr-2 text-gray-500 dark:text-gray-400"></i> Customer Support
      </a>
    </div>
  </div>
</div>

<!-- To make the dropdown interactive, you would typically use a small amount of JavaScript.
     For example, a simple toggle on button click to add/remove 'hidden' class from the dropdown panel.
     Since the prompt strictly forbids JavaScript, this example shows the structure 
     and styling for both states (button and dropdown content) as per Tailwind CSS usage. -->

<!-- To simulate interactivity for demonstration, you can manually remove 'hidden' class from the dropdown panel div.
     Example: <div class="origin-top-right absolute right-0 [...] z-10" role="menu" ...> -->

드롭다운 메뉴 컴포넌트

뉴스/저널리즘 웹사이트를 위한 간단한 인더스트리얼 스타일의 드롭다운 메뉴 구성 요소로, 포레스트/그린 색상 팔레트와 다크 모드 지원을 제공합니다. 모든 장치에서 응답하도록 설계되었습니다.

열다 미리 보기

                <div class="relative flex justify-center items-center font-sans dark:bg-gray-900 bg-gray-100 p-4">
  <div class="group relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center items-center w-full rounded-md border border-gray-400 dark:border-gray-600 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-emerald-500 dark:focus:ring-offset-gray-900 dark:focus:ring-emerald-600 transition-all duration-300" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Sections
        <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>

    <!--
      Dropdown menu, show/hide based on menu state.

      Entering: "transition ease-out duration-100"
        From: "transform opacity-0 scale-95"
        To: "transform opacity-100 scale-100"
      Leaving: "transition ease-in duration-75"
        From: "transform opacity-100 scale-100"
        To: "transform opacity-0 scale-95"
    -->
    <div class="opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 duration-200 ease-out 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 focus:outline-none transition-all" 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 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">Latest News</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">Politics</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">Business</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">Technology</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">Opinion</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">Sports</a>
      </div>
    </div>
  </div>
</div>

3D_Marketplace_Dropdown_Menu

마켓플레이스 플랫폼용으로 설계된 복잡한 3D에서 영감을 받은 드롭다운 메뉴 구성 요소로, 따뜻한 무채색, 다단계 탐색, 다크 모드 지원을 통한 완전한 응답성을 제공합니다. 미묘한 그림자와 전환을 통해 깊이와 몰입도를 통합합니다.

열다 미리 보기

                <div class="relative inline-block text-left font-sans">
  <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-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-850 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-amber-500 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg active:scale-95" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Categories
      <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>

  <!--
    Dropdown menu, show/hide based on menu state.

    Entering: "transition ease-out duration-200"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-150"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="absolute right-0 mt-2 w-72 md:w-96 origin-top-right bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-800 rounded-md shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none transform scale-100 opacity-100 transition-all duration-300 ease-in-out z-50" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">
        <img src="https://picsum.photos/30/30?random=1" alt="Electronics icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Electronics
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">
        <img src="https://picsum.photos/30/30?random=2" alt="Fashion icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Fashion & Apparel
        <svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">
        <img src="https://picsum.photos/30/30?random=3" alt="Home & Garden icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Home & Garden
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">
        <img src="https://picsum.photos/30/30?random=4" alt="Books icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Books & Media
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">
        <img src="https://picsum.photos/30/30?random=5" alt="Sports icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Sports & Outdoors
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">
        <img src="https://picsum.photos/30/30?random=6" alt="Vehicles icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Vehicles
        <svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-6">All Categories</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-7">Sell on Marketplace</a>
    </div>
  </div>
</div>

레트로게이밍드롭다운메뉴

반응형 레트로/빈티지 테마의 드롭다운 메뉴 구성 요소로, 게임 웹사이트에 적합하며 다크 모드를 지원하는 차분한 색 구성표가 있습니다.

열다 미리 보기

                <div class="relative inline-block text-left font-mono">
  <button id="retroDropdownButton" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-400 bg-gray-200 px-4 py-2 text-sm font-bold text-gray-800 shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-400 transform transition-all duration-150 ease-in-out active:translate-y-1" aria-expanded="false" aria-haspopup="true">
    Game Actions
    <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 id="retroDropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gray-200 ring-1 ring-black ring-opacity-5 focus:outline-none border-t-2 border-l-2 border-r-4 border-b-4 border-gray-500 dark:bg-gray-800 dark:border-gray-600 hidden opacity-0 scale-95 transition-all duration-200 ease-out transform" role="menu" aria-orientation="vertical" aria-labelledby="retroDropdownButton" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0">
        <span class="pr-2 text-yellow-600 dark:text-yellow-400">▶</span> New Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-1">
        <span class="pr-2 text-red-600 dark:text-red-400">■</span> Load Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-2">
        <span class="pr-2 text-green-600 dark:text-green-400">●</span> Save Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-3">
        <span class="pr-2 text-blue-600 dark:text-blue-400">◆</span> Options
      </a>
    </div>
  </div>
</div>

<script>
  // Basic JavaScript for demonstration, not part of the HTML/Tailwind solution itself.
  // In a real application, you'd use a JS framework or a dedicated script.
  const dropdownButton = document.getElementById('retroDropdownButton');
  const dropdownMenu = document.getElementById('retroDropdownMenu');

  dropdownButton.addEventListener('click', () => {
    const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
    dropdownButton.setAttribute('aria-expanded', !isExpanded);
    if (!isExpanded) {
      dropdownMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
      dropdownMenu.classList.add('block', 'opacity-100', 'scale-100');
      dropdownMenu.focus();
    } else {
      dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
      dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
    }
  });

  // Close the dropdown if clicking outside
  document.addEventListener('click', (event) => {
    if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
      if (!dropdownMenu.classList.contains('hidden')) {
        dropdownButton.setAttribute('aria-expanded', 'false');
        dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
        dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
      }
    }
  });

  // Close on Escape key
  dropdownMenu.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      dropdownButton.setAttribute('aria-expanded', 'false');
      dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
      dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
      dropdownButton.focus();
    }
  });
</script>

드롭다운 메뉴 컴포넌트

금융/뱅킹 인터페이스를 위해 설계된 간단한 단색 드롭다운 메뉴 구성 요소로, 미묘한 마이크로 인터랙션과 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.

열다 미리 보기

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="transition-all duration-300 ease-in-out 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-purple-500 dark:focus:ring-offset-gray-900 dark:focus:ring-purple-600 active:scale-98" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Account Actions
      <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>

  <!-- Dropdown menu, show/hide based on menu state. Using inline style here to simulate dynamic show/hide. In a real app, this would be toggled with JS. -->
  <div class="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 focus:outline-none origin-top-right transition-all duration-300 ease-out transform scale-95 opacity-0 invisible sm:scale-100 sm:opacity-100 sm:visible" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.794 3.391A60.07 60.07 0 0022.5 12c0-8.284-6.716-15-15-15S0 3.716 0 12c0 3.037.915 5.86 2.593 8.163" />
        </svg>
        View Balance
      </a>
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Transaction History
      </a>
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Transfer Funds
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="transition-colors duration-200 block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
          <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3-9l-3 3m0 0l3 3m-3-3H21" />
          </svg>
          Log Out Account
        </button>
      </form>
    </div>
  </div>
</div>

드롭다운 메뉴 컴포넌트

문서 또는 위키 사이트용으로 설계된 복잡하고 반응이 빠른 드롭다운 메뉴 구성 요소로, Ocean/Blue 색 구성표가 있는 깔끔하고 미니멀한 스위스/국제 타이포그래피 스타일을 특징으로 합니다. 다크 모드 지원 및 여러 대화형 요소가 포함되어 있습니다.

열다 미리 보기

                <div class="font-sans antialiased text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 md:p-8">

  <!-- Dropdown Container -->
  <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-blue-700 shadow-sm px-4 py-2 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700 dark:focus:ring-offset-gray-900" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Documentation Sections
        <!-- Heroicon name: solid/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>

    <!-- Dropdown menu, show/hide based on menu state. -->
    <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-blue-700 focus:outline-none" 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 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-0">Getting Started</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-1">Core Concepts</a>
      </div>
      <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-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-2">Advanced Guides</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-3">API Reference</a>
      </div>
      <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-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-4">Tutorials</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-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-5">Support &amp; FAQ</button>
        </form>
      </div>
    </div>
  </div>

  <!-- Example of another dropdown or related element - for complexity -->
  <div class="relative inline-block text-left ml-4">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-blue-700 shadow-sm px-4 py-2 bg-blue-500 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-offset-gray-900" id="menu-button-2" aria-expanded="true" aria-haspopup="true">
        Version
        <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-44 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-blue-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button-2" 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-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v2.0 (Latest)</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v1.5</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v1.0 (Archive)</a>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (example concept - would typically be part of a larger nav) -->
  <div class="sm:hidden mt-8">
    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <!-- Icon when menu is closed. Heroicon name: outline/menu -->
      <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 -->
      <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 class="space-y-1 px-2 pt-2 pb-3 hidden" id="mobile-menu">
      <a href="#" class="bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Getting Started</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">Core Concepts</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">Advanced Guides</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">API Reference</a>
    </div>
  </div>

</div>

드롭다운 메뉴 컴포넌트

금융/은행 인터페이스를 위한 반응형 드롭다운 메뉴 구성 요소로, 마이크로 인터랙션, 보석 색조 색상 및 다크 모드 지원을 제공합니다. 사용자 참여와 명확성을 위해 설계되었습니다.

열다 미리 보기

                <div class="relative inline-block text-left font-sans">
  <button id="dropdown-button" type="button" class="inline-flex justify-center items-center gap-2 w-full rounded-md border border-emerald-600 bg-emerald-700 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-100 focus:ring-emerald-500 dark:border-emerald-500 dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:text-gray-100 dark:focus:ring-offset-emerald-900 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105" aria-expanded="true" aria-haspopup="true">
    <svg class="-ml-1 mr-2 h-5 w-5 text-current" 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.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
    </svg>
    <span>Account Options</span>
  </button>

  <div id="dropdown-menu" class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 transition-all duration-300 ease-out scale-95 opacity-0 invisible" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-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-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5a.75.75 0 00.75.75h4.5a.75.75 0 000-1.5h-3.75V4.75z" />
            <path fill-rule="evenodd" d="M.93 2.822A.75.75 0 011.875 2.25h16.25a.75.75 0 01.945.572L19.45 4.75H.55L.93 2.822zM19.5 6.25l-.273 1.455A49.123 49.123 0 0110 16.75 49.123 49.123 0 01.773 7.705L.5 6.25h19z" clip-rule="evenodd" />
          </svg>
          <span>View Balance</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M.5 9.5a.75.75 0 01.75-.75h1.612l1.64-1.612a.75.75 0 011.14-.093l1.84 2.301 3.09-3.09a.75.75 0 011.06 0l2.031 2.032c.571-1.042.868-2.146.992-3.184A.75.75 0 0118.75 4l.25 10A.75.75 0 0118.28 15.118l-1.442-.361a49.117 49.117 0 01-14.774.225l-1.444.364A.75.75 0 01.5 14.5l.25-10a.75.75 0 01.272-.5zM16.48 9.07c-1.42.062-2.812.22-4.177.472-1.393.255-2.756.55-4.089.882l-2.032-2.032 2.502-3.128c.378-.472.935-.839 1.57-.935l1.896-.284c.8-.119 1.603-.178 2.408-.178.692 0 1.38-.027 2.063-.079l2.457-1.365a.75.75 0 01.407.697v1.895l.135 1.583z" clip-rule="evenodd" />
          </svg>
          <span>Transfer Funds</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M2 4.25A2.25 2.25 0 014.25 2h11.5A2.25 2.25 0 0118 4.25v2.5a.75.75 0 001.5 0v-2.5A3.75 3.75 0 0015.75 0H4.25A3.75 3.75 0 00.5 4.25v2.5a.75.75 0 001.5 0v-2.5z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M.5 10.75a.75.75 0 01.75-.75h17a.75.75 0 010 1.5h-17a.75.75 0 01-.75-.75zM1.25 13.5a.75.75 0 01.75-.75h16a.75.75 0 010 1.5H2a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M7.75 16.25a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75zM2.5 7.5a.75.75 0 000 1.5h15a.75.75 0 000-1.5H2.5z" clip-rule="evenodd" />
          </svg>
          <span>Transaction History</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M10.5 5h-1a.75.75 0 000 1.5h1a.75.75 0 000-1.5zM10.5 8h-1a.75.75 0 000 1.5h1a.75.75 0 000-1.5zM3 12a2 2 0 104 0 2 2 0 00-4 0z" />
            <path fill-rule="evenodd" d="M2.25 5.5A2.75 2.75 0 015 2.75h10A2.75 2.75 0 0117.75 5.5v9.5a2.75 2.75 0 01-2.75 2.75H5A2.75 2.75 0 012.25 15V5.5zm3.5-.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-4z" clip-rule="evenodd" />
            <path d="M10.5 11h-1a.75.75 0 000 1.5h1a.75.75 0 000-1.5zm.75 2.25a.75.75 0 00-1.5 0v1a.75.75 0 001.5 0v-1z" />
          </svg>
          <span>Manage Cards</span>
        </div>
      </a>
    </div>
  </div>
</div>

<script>
  const dropdownButton = document.getElementById('dropdown-button');
  const dropdownMenu = document.getElementById('dropdown-menu');

  function toggleDropdown() {
    const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
    if (isExpanded) {
      dropdownMenu.classList.add('opacity-0', 'scale-95', 'invisible');
      dropdownMenu.classList.remove('opacity-100', 'scale-100', 'visible');
      dropdownButton.setAttribute('aria-expanded', 'false');
    } else {
      dropdownMenu.classList.remove('opacity-0', 'scale-95', 'invisible');
      dropdownMenu.classList.add('opacity-100', 'scale-100', 'visible');
      dropdownButton.setAttribute('aria-expanded', 'true');
    }
  }

  dropdownButton.addEventListener('click', toggleDropdown);

  // Close the dropdown if the user clicks outside of it
  document.addEventListener('click', (event) => {
    if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
      const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
      if (isExpanded) {
        toggleDropdown();
      }
    }
  });

  // Close dropdown on escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
      if (isExpanded) {
        toggleDropdown();
      }
    }
  });
</script>

드롭다운 메뉴 컴포넌트

레트로/빈티지 색상 팔레트가 있는 단순하고 유기적/자연에서 영감을 받은 드롭다운 메뉴 구성 요소로 제조/산업 회사에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

열다 미리 보기

                <div class="relative inline-block text-left font-serif">
  <button id="dropdownButton" 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-stone-100 text-sm font-medium text-amber-900 hover:bg-stone-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-stone-100 focus:ring-amber-500 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900 dark:focus:ring-amber-400 opacity-90 transition-all duration-300 ease-in-out transform hover:scale-105">
    <svg class="-ml-1 mr-2 h-5 w-5 text-amber-700 dark:text-amber-400" 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>
    <span>Menu Options</span>
    <svg class="-mr-1 ml-2 h-5 w-5 text-amber-700 dark:text-amber-400" 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 panel, show/hide based on dropdown state. -->
  <div id="dropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-stone-50 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none dark:bg-gray-700 dark:divide-gray-600 opacity-0 scale-95 pointer-events-none transition-all duration-200 ease-out transform" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-0">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM13 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM13 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2z" />
        </svg>
        Production Overview
      </a>
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-1">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M6.267 19.510A2.898 2.898 0 0010 18c.95 0 1.85-.357 2.584-.96a1.597 1.597 0 011.758 0C13.565 17.59 14 17 14 17H6s-1.57-.406-2.584-1.96c-.734-.603-1.634-.96-2.584-.96H0zM14 6a2 2 0 00-2-2H8a2 2 0 00-2 2v6a2 2 0 002 2h4a2 2 0 002-2V6z" clip-rule="evenodd" />
        </svg>
        Quality Control
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-2">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 7a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
        </svg>
        Supply Chain
      </a>
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-3">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zm-2 2a1 1 0 00-1 1v3a1 1 0 001 1h2a1 1 0 001-1v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
        Maintenance Log
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-4">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.5L3 18V6zm4 6a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
        </svg>
        Reports
      </a>
    </div>
  </div>
</div>

<script>
  // This script is for demonstration purposes to toggle the dropdown.
  // In a real application, you would use a JavaScript framework or library.
  document.addEventListener('DOMContentLoaded', function() {
    const dropdownButton = document.getElementById('dropdownButton');
    const dropdownMenu = document.getElementById('dropdownMenu');

    dropdownButton.addEventListener('click', function() {
      const isExpanded = dropdownMenu.classList.contains('scale-100');
      if (isExpanded) {
        dropdownMenu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        dropdownMenu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
      } else {
        dropdownMenu.classList.remove('opacity-0', 'scale-95', 'pointer-events-none');
        dropdownMenu.classList.add('opacity-100', 'scale-100', 'pointer-events-auto');
      }
    });

    // Close the dropdown if the user clicks outside of it
    window.addEventListener('click', function(event) {
      if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
        dropdownMenu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        dropdownMenu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
      }
    });
  });
</script>