CCHub Logo CCHub Tailwind Collection
구성 요소 드롭다운 메뉴 3D 드롭다운 메뉴 컴포넌트

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

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

미리 보기

HTML 코드 

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

관련 구성 요소

스큐어모픽 드롭다운 메뉴

소셜 미디어를 위한 스큐어모픽 드롭다운 메뉴(단순, 유사 색상)

열다

3D_Marketplace_Dropdown_Menu

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

열다

Neumorphism Earth Tone 드롭다운 메뉴

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

열다