検索コンポーネント

カテゴリ

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

ドロップダウンメニュー

クリックまたはホバーしたときに表示されるサブメニュー

Neumorphism、Earth、Tone、ドロップダウンメニュー

アースカラーのNeumorphismスタイルのドロップダウンメニューで、eコマースに適しています。レスポンシブで、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>

ニューモーフィックドロップダウンメニュー(グレースケール)

グレースケール色のニューモルフィックドロップダウンメニュー。ポートフォリオ用のシンプルなレイアウトで、ダークモードのサポートにより応答性があります。JavaScript はありません。

開けるプレビュー

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

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

レトロ/ビンテージの美学を備えた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>