Dropdown

<div class="d-ib p-r">
  <button
    id="dropdown-button"
    aria-haspopup="menu"
    aria-expanded="true"
    aria-controls="dropdown-menu"
    class="d-f ai-c g-2 px-4 py-2 rad-0 fs-sm fw-600 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
  >
    <span>Actions</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-4 h-4"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="m6 9 6 6 6-6" />
    </svg>
  </button>
  <div
    id="dropdown-menu"
    role="menu"
    aria-labelledby="dropdown-button"
    class="p-a mt-1 p-1 bg-white b-1 bc-silver-4 rad-0 bs-3 min-w-40 z-10"
  >
    <button role="menuitem" tabindex="-1" class="d-b w-full ta-l px-3 py-2 rad-0 fs-sm tc-slate-8 bg-transparent b-0 h:bg-silver-1 c-p">New file</button>
    <button role="menuitem" tabindex="-1" class="d-b w-full ta-l px-3 py-2 rad-0 fs-sm tc-slate-8 bg-transparent b-0 h:bg-silver-1 c-p">Copy link</button>
    <button role="menuitem" tabindex="-1" class="d-b w-full ta-l px-3 py-2 rad-0 fs-sm tc-slate-8 bg-transparent b-0 h:bg-silver-1 c-p">Edit file</button>
    <hr class="my-1 b-0 bt-1 bc-silver-4" />
    <button role="menuitem" tabindex="-1" class="d-b w-full ta-l px-3 py-2 rad-0 fs-sm tc-red bg-transparent b-0 h:bg-red-1 c-p">Delete file</button>
  </div>
</div>

<div class="d-ib p-r">
  <button
    id="dropdown-button"
    aria-haspopup="menu"
    aria-expanded="true"
    aria-controls="dropdown-menu"
    class="d-f ai-c g-2 px-4 py-2 rad-0 fs-sm fw-600 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
  >
    <span>Actions</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-4 h-4"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="m6 9 6 6 6-6" />
    </svg>
  </button>
  <div
    id="dropdown-menu"
    role="menu"
    aria-labelledby="dropdown-button"
    class="p-a mt-1 p-1 bg-white b-1 bc-silver-4 rad-0 bs-3 min-w-44 z-10"
  >
    <button role="menuitem" tabindex="-1" class="d-f ai-c g-2 w-full ta-l px-3 py-2 rad-0 fs-sm tc-slate-8 bg-transparent b-0 h:bg-silver-1 c-p">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-4 h-4 tc-silver-10"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <path
          d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <polyline
          points="152 32 152 88 208 88"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="104"
          y1="152"
          x2="152"
          y2="152"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="128"
          y1="128"
          x2="128"
          y2="176"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
      <span>New file</span>
    </button>
    <button role="menuitem" tabindex="-1" class="d-f ai-c g-2 w-full ta-l px-3 py-2 rad-0 fs-sm tc-slate-8 bg-transparent b-0 h:bg-silver-1 c-p">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-4 h-4 tc-silver-10"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <polyline
          points="168 168 216 168 216 40 88 40 88 88"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <rect
          x="40"
          y="88"
          width="128"
          height="128"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
      <span>Copy link</span>
    </button>
    <button role="menuitem" tabindex="-1" class="d-f ai-c g-2 w-full ta-l px-3 py-2 rad-0 fs-sm tc-slate-8 bg-transparent b-0 h:bg-silver-1 c-p">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-4 h-4 tc-silver-10"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <path
          d="M92.69,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31L98.34,213.66A8,8,0,0,1,92.69,216Z"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="136"
          y1="64"
          x2="192"
          y2="120"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
      <span>Edit file</span>
    </button>
    <hr class="my-1 b-0 bt-1 bc-silver-4" />
    <button role="menuitem" tabindex="-1" class="d-f ai-c g-2 w-full ta-l px-3 py-2 rad-0 fs-sm tc-red bg-transparent b-0 h:bg-red-1 c-p">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-4 h-4"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <line
          x1="216"
          y1="56"
          x2="40"
          y2="56"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="104"
          y1="104"
          x2="104"
          y2="168"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="152"
          y1="104"
          x2="152"
          y2="168"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M168,56V40a16,16,0,0,0-16-16H104A16,16,0,0,0,88,40V56"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
      <span>Delete file</span>
    </button>
  </div>
</div>

<div class="d-ib p-r">
  <button
    id="dropdown-button"
    aria-haspopup="menu"
    aria-expanded="true"
    aria-controls="dropdown-menu"
    class="d-f ai-c g-2 px-4 py-2 rad-0 fs-sm fw-600 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2"
  >
    <span>Actions</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-4 h-4"
      viewBox="0 0 256 256"
      aria-hidden="true"
    >
      <rect width="256" height="256" fill="none" />
      <polyline
        points="208 96 128 176 48 96"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="16"
      />
    </svg>
  </button>
  <div
    id="dropdown-menu"
    role="menu"
    aria-labelledby="dropdown-button"
    class="p-a mt-1 p-1 bg-white b-1 bc-silver-4 rad-0 bs-3 min-w-64 z-10"
  >
    <button role="menuitem" tabindex="-1" class="d-f ai-c jc-sb w-full ta-l px-3 py-2 rad-0 fs-sm tc-slate-8 bg-transparent b-0 h:bg-silver-1 c-p">
      <div class="d-f ai-c g-3">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4 tc-silver-10"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <path
            d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <polyline
            points="152 32 152 88 208 88"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <line
            x1="104"
            y1="152"
            x2="152"
            y2="152"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <line
            x1="128"
            y1="128"
            x2="128"
            y2="176"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <div class="d-f fd-c">
          <span class="fw-600">New file</span>
          <span class="fs-xs tc-slate-5">Create a new document</span>
        </div>
      </div>
      <div class="d-f ai-c g-1 p-1 bg-silver-1 b-1 bc-silver-4 rad-0 tc-slate-5" aria-hidden="true">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3"
          viewBox="0 0 256 256"
        >
          <rect width="256" height="256" fill="none" />
          <path
            d="M180,48h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H152a0,0,0,0,1,0,0V76a28,28,0,0,1,28-28Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M48,48H76a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0A28,28,0,0,1,48,76V48A0,0,0,0,1,48,48Z"
            transform="translate(152 152) rotate(180)"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M152,152h28a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0a28,28,0,0,1-28-28V152A0,0,0,0,1,152,152Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M76,152h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H48a0,0,0,0,1,0,0V180A28,28,0,0,1,76,152Z"
            transform="translate(152 360) rotate(-180)"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <rect
            x="104"
            y="104"
            width="48"
            height="48"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <span class="fs-xs">N</span>
      </div>
    </button>
    <button role="menuitem" tabindex="-1" class="d-f ai-c jc-sb w-full ta-l px-3 py-2 rad-0 fs-sm tc-slate-8 bg-transparent b-0 h:bg-silver-1 c-p">
      <div class="d-f ai-c g-3">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4 tc-silver-10"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <polyline
            points="168 168 216 168 216 40 88 40 88 88"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <rect
            x="40"
            y="88"
            width="128"
            height="128"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <div class="d-f fd-c">
          <span class="fw-600">Copy link</span>
          <span class="fs-xs tc-slate-5">Copy to clipboard</span>
        </div>
      </div>
      <div class="d-f ai-c g-1 p-1 bg-silver-1 b-1 bc-silver-4 rad-0 tc-slate-5" aria-hidden="true">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3"
          viewBox="0 0 256 256"
        >
          <rect width="256" height="256" fill="none" />
          <path
            d="M180,48h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H152a0,0,0,0,1,0,0V76a28,28,0,0,1,28-28Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M48,48H76a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0A28,28,0,0,1,48,76V48A0,0,0,0,1,48,48Z"
            transform="translate(152 152) rotate(180)"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M152,152h28a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0a28,28,0,0,1-28-28V152A0,0,0,0,1,152,152Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M76,152h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H48a0,0,0,0,1,0,0V180A28,28,0,0,1,76,152Z"
            transform="translate(152 360) rotate(-180)"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <rect
            x="104"
            y="104"
            width="48"
            height="48"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <span class="fs-xs">C</span>
      </div>
    </button>
    <button role="menuitem" tabindex="-1" class="d-f ai-c jc-sb w-full ta-l px-3 py-2 rad-0 fs-sm tc-slate-8 bg-transparent b-0 h:bg-silver-1 c-p">
      <div class="d-f ai-c g-3">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4 tc-silver-10"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <path
            d="M92.69,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31L98.34,213.66A8,8,0,0,1,92.69,216Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <line
            x1="136"
            y1="64"
            x2="192"
            y2="120"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <div class="d-f fd-c">
          <span class="fw-600">Edit file</span>
          <span class="fs-xs tc-slate-5">Modify file content</span>
        </div>
      </div>
      <div class="d-f ai-c g-1 p-1 bg-silver-1 b-1 bc-silver-4 rad-0 tc-slate-5" aria-hidden="true">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3"
          viewBox="0 0 256 256"
        >
          <rect width="256" height="256" fill="none" />
          <path
            d="M180,48h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H152a0,0,0,0,1,0,0V76a28,28,0,0,1,28-28Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M48,48H76a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0A28,28,0,0,1,48,76V48A0,0,0,0,1,48,48Z"
            transform="translate(152 152) rotate(180)"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M152,152h28a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0a28,28,0,0,1-28-28V152A0,0,0,0,1,152,152Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M76,152h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H48a0,0,0,0,1,0,0V180A28,28,0,0,1,76,152Z"
            transform="translate(152 360) rotate(-180)"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <rect
            x="104" y="104"
            width="48" height="48"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <span class="fs-xs">E</span>
      </div>
    </button>
    <hr class="my-1 b-0 bt-1 bc-silver-4" />
    <button role="menuitem" tabindex="-1" class="d-f ai-c jc-sb w-full ta-l px-3 py-2 rad-0 fs-sm tc-red bg-transparent b-0 h:bg-red-1 c-p">
      <div class="d-f ai-c g-3">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-4 h-4"
          viewBox="0 0 256 256"
          aria-hidden="true"
        >
          <rect width="256" height="256" fill="none" />
          <line
            x1="216" y1="56" x2="40" y2="56"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <line
            x1="104" y1="104" x2="104" y2="168"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <line
            x1="152" y1="104" x2="152" y2="168"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M168,56V40a16,16,0,0,0-16-16H104A16,16,0,0,0,88,40V56"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <div class="d-f fd-c">
          <span class="fw-600">Delete file</span>
          <span class="fs-xs tc-slate-5">Move to trash</span>
        </div>
      </div>
      <div class="d-f ai-c g-1 p-1 bg-silver-1 b-1 bc-silver-4 rad-0 tc-slate-5" aria-hidden="true">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3"
          viewBox="0 0 256 256"
        >
          <rect width="256" height="256" fill="none" />
          <path
            d="M180,48h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H152a0,0,0,0,1,0,0V76a28,28,0,0,1,28-28Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M48,48H76a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0A28,28,0,0,1,48,76V48A0,0,0,0,1,48,48Z"
            transform="translate(152 152) rotate(180)"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M152,152h28a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28h0a28,28,0,0,1-28-28V152A0,0,0,0,1,152,152Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <path
            d="M76,152h0a28,28,0,0,1,28,28v0a28,28,0,0,1-28,28H48a0,0,0,0,1,0,0V180A28,28,0,0,1,76,152Z"
            transform="translate(152 360) rotate(-180)"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
          <rect
            x="104" y="104"
            width="48" height="48"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-3 h-3"
          viewBox="0 0 256 256"
        >
          <rect width="256" height="256" fill="none" />
          <path
            d="M32,120l96-96,96,96H176v88a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V120Z"
            fill="none"
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="16"
          />
        </svg>
        <span class="fs-xs">D</span>
      </div>
    </button>
  </div>
</div>