List

<ul class="w-48 rounded-lg border border-main-border bg-surface p-1">
  <li class="w-full px-3 py-2 text-sm">Profile</li>
  <li class="w-full px-3 py-2 text-sm">Settings</li>
  <li class="w-full px-3 py-2 text-sm">Messages</li>
  <li class="w-full px-3 py-2 text-sm">Download</li>
</ul>

<div class="text-mian-text w-48 rounded-lg border bg-surface p-1 text-sm">
  <button
    aria-current="true"
    type="button"
    class="w-full cursor-pointer rounded-md bg-primary px-4 py-2 text-left text-sm text-primary-text focus:outline-none rtl:text-right"
  >
    Profile
  </button>
 
  <button
    type="button"
    class="w-full cursor-pointer rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text"
  >
    Settings
  </button>
 
  <button
    type="button"
    class="w-full cursor-pointer rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text"
  >
    Messages
  </button>
 
  <button
    type="button"
    disabled="true"
    class="w-full cursor-pointer rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text disabled:pointer-events-none disabled:cursor-default disabled:opacity-50"
  >
    Download
  </button>
</div>

<div class="text-mian-text w-48 rounded-lg border bg-surface p-1 text-sm">
  <button
    aria-current="true"
    type="button"
    class="inline-flex w-full cursor-pointer items-center gap-2 rounded-md bg-primary px-4 py-2 text-left text-sm text-primary-text focus:outline-none rtl:text-right"
  >
    <svg
      stroke="currentColor"
      fill="currentColor"
      stroke-width="0"
      viewBox="0 0 496 512"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"
      ></path>
    </svg>
    Profile
  </button>
 
  <button
    type="button"
    class="inline-flex w-full cursor-pointer items-center gap-2 rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text"
  >
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
      ></path>
      <circle cx="12" cy="12" r="3"></circle>
    </svg>
    Settings
  </button>
 
  <button
    type="button"
    class="inline-flex w-full cursor-pointer items-center gap-2 rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text"
  >
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"></path>
    </svg>
    Messages
  </button>
 
  <button
    type="button"
    disabled="true"
    class="inline-flex w-full cursor-pointer items-center gap-2 rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text disabled:pointer-events-none disabled:cursor-default disabled:opacity-50"
  >
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
      <polyline points="7 10 12 15 17 10"></polyline>
      <line x1="12" x2="12" y1="15" y2="3"></line>
    </svg>
    Download
  </button>
</div>

<li
  class="flex w-full max-w-lg flex-wrap items-center gap-2 bg-surface px-4 py-2 text-sm"
>
  <div
    class="text-mian-text inline-flex h-8 w-8 items-center justify-center rounded-md bg-muted text-sm sm:h-10 sm:w-10"
  >
    <svg
      class="h-5 w-5"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </div>
 
  <div
    class="relative flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted text-sm sm:h-10 sm:w-10"
  >
    <img
      alt="avatar"
      src="/images/avatar/avatar-3.png"
      class="h-full w-full object-cover"
    />
  </div>
 
  <div class="flex-1 text-left">
    <h5 class="flex-1 text-sm font-medium sm:text-main-text">List Item</h5>
    <p class="flex-1 text-xs text-muted-text">Supporting Text</p>
  </div>
 
  <span class="text-xs text-muted-text">Label</span>
 
  <span class="flex size-5 flex-shrink-0 items-center justify-center">
    <svg
      class="h-4 w-4"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      height="1em"
      width="1em"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </span>
</li>