<.menu id="menu-single-default" class="relative inline-block text-left w-56" menu_btn_class="inline-flex justify-center rounded-md bg-purple-600 px-4 py-3 text-sm font-medium text-white hover:bg-purple-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75" menu_items_class="left-0 px-1 py-1 mt-2 w-56 origin-top-left space-y-0.5 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none" menu_item_class="focus:bg-purple-600 focus:border-none focus:border-transparent focus:outline-none focus:text-white  focus:rounded-md hover:rounded-md transform-all hover:border-transparent text-gray-700 duration-100 hover:bg-purple-100 hover:text-gray-800 ">
  <:button>
    <p>Click Me</p>
  </:button>
  <:item>
    <button class="px-4 py-2 space-x-4 inline-flex items-center">
      <.icon name="hero-pencil-solid" class="h-5 w-5" />
      <p>Edit</p>
    </button>
  </:item>
  <:item>
    <button class="px-4 py-2 space-x-4 inline-flex items-center">
      <.icon name="hero-document-duplicate-solid" class="h-5 w-5" />
      <p>Duplicate</p>
    </button>
  </:item>
  <:item>
    <button class="px-4 py-2 space-x-4 inline-flex items-center">
      <.icon name="hero-archive-box-solid" class="h-5 w-5" />
      <p>Archive</p>
    </button>
  </:item>
  <:item>
    <button class="px-4 py-2 space-x-4 inline-flex items-center">
      <.icon name="hero-trash-solid" class="h-5 w-5" />
      <p>Delete</p>
    </button>
  </:item>
</.menu>