ドロップダウンメニュー

ドロップダウンメニューコンポーネント

ソーシャルメディアインターフェース用のレスポンシブドロップダウンメニューコンポーネントで、ダークテーマとパステルカラーの配色が特徴です。これは、目の疲れを軽減するように設計された、複数のインタラクティブな要素を持つ複雑なコンポーネントです。

プレビューを開く

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

レトロ/ビンテージドロップダウンメニュー

レトロ/ビンテージの美学を備えたeコマース向けに設計された複雑なドロップダウンメニューコンポーネントで、単色、豊富なインターフェイス、ダークモードのサポートを含むレスポンシブデザインが特徴です。

プレビューを開く

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

ドロップダウンメニューコンポーネント

マイクロインタラクション、類似の配色、ダークテーマのサポートで設計されたレスポンシブドロップダウンメニューコンポーネントで、ポートフォリオWebサイトに適しています。

プレビューを開く

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

Skeuomorphicドロップダウンメニュー

ソーシャルメディア用のスキューモーフィックドロップダウンメニュー(シンプルで類似の色)

プレビューを開く

                <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-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-700" 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.

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

ドロップダウンメニューコンポーネント

ダークモードUIのレスポンシブドロップダウンメニューコンポーネント

プレビューを開く

                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<div class="dark:bg-gray-900 dark:text-white 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-offset-gray-100 dark:focus:ring-offset-gray-800 focus:ring-indigo-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>
    </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 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-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
        <form method="POST" action="#" role="none">
          <button type="submit" class="text-gray-700 dark:text-gray-200 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-3">
            Sign out
          </button>
        </form>
      </div>
    </div>
  </div>

</div>

カテゴリ

ドロップダウンメニュー