Menú desplegable del modo oscuro de Cyberpunk

<div class="relative inline-block text-left font-mono z-50">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-700 dark:border-gray-600 shadow-sm px-4 py-2 bg-gradient-to-br from-gray-900 to-black dark:from-gray-800 dark:to-gray-900 text-sm font-medium text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-all duration-300 ease-in-out group" id="menu-button" aria-expanded="true" aria-haspopup="true">
      <span class="h-4 w-4 mr-2 text-blue-400 group-hover:text-blue-300 transition-colors duration-200">&#9679;</span>
      Dashboard Filters
      <svg class="-mr-1 ml-2 h-5 w-5 text-gray-500 dark:text-gray-400 group-hover:text-gray-300 transition-colors duration-200" 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 sm:w-64 md:w-72 lg:w-80 rounded-md shadow-lg bg-gradient-to-br from-gray-950 to-black dark:from-gray-900 dark:to-gray-950 ring-1 ring-inset ring-gray-700 dark:ring-gray-800 focus:outline-none transform scale-y-0 opacity-0 group-focus-within:scale-y-100 group-focus-within:opacity-100 transition-all duration-300 ease-out" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Search/Filter Input -->
      <div class="px-4 py-2">
        <input type="text" placeholder="Search options..." class="w-full px-3 py-2 text-sm bg-gray-800 dark:bg-gray-800 border border-gray-700 dark:border-gray-700 rounded-md text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-colors duration-200" />
      </div>

      <!-- Section Header -->
      <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-800 dark:border-gray-800">Data Streams</div>

      <!-- Menu Items - Checkboxes -->
      <div class="py-1">
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">Real-time Metrics</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Historical Logs</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">System Alerts</span>
        </label>
      </div>

      <!-- Divider -->
      <div class="border-t border-gray-800 dark:border-gray-800 my-1"></div>

      <!-- Section Header -->
      <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-800 dark:border-gray-800">Time Range</div>

      <!-- Menu Items - Radio Buttons (simulated) -->
      <div class="py-1">
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">Last Hour</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Last 24 Hours</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Last 7 Days</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Custom Range...</span>
        </label>
      </div>

      <!-- Divider -->
      <div class="border-t border-gray-800 dark:border-gray-800 my-1"></div>

      <!-- Action Buttons -->
      <div class="py-1 px-4 flex justify-between space-x-2" role="none">
        <button class="w-full inline-flex justify-center rounded-md border border-gray-700 dark:border-gray-600 shadow-sm px-4 py-2 bg-gray-800 dark:bg-gray-700 text-sm font-medium text-gray-300 dark:text-gray-200 hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-colors duration-200">Reset</button>
        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-colors duration-200">Apply</button>
      </div>
    </div>
  </div>
</div>