Composant de menu déroulant

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