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

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