Dropdown

Floating option/action list.

html

<div class="dropdown-demo">
  <details open class="dropdown dropdown--below" style="--accent:#E8A020;--menu-width:200px;">
    <summary class="dropdown__trigger" role="button" aria-haspopup="true" aria-expanded="true">
      Actions
      <svg class="dropdown__chevron" width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </summary>
    <ul class="dropdown__menu" role="menu">
      <li role="menuitem"><button type="button" class="dropdown__item">Duplicate</button></li>
      <li role="menuitem"><button type="button" class="dropdown__item">Rename</button></li>
      <li role="menuitem"><button type="button" class="dropdown__item dropdown__item--danger">Delete</button></li>
    </ul>
  </details>
</div>
<style>
.dropdown-demo { position: relative; min-height: 220px; padding: 60px 24px; box-sizing: border-box; font: 16px/1.5 system-ui, sans-serif; }
.dropdown { position: relative; display: inline-block; }
.dropdown__trigger { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: #FAF7F2; color: #241430; border: 1.5px solid #24143033; border-radius: 8px; padding: 9px 14px; font-weight: 500; }
.dropdown__trigger::-webkit-details-marker { display: none; }
.dropdown__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropdown__menu { position: absolute; left: 0; width: var(--menu-width); margin: 0; padding: 6px; list-style: none; background: #FAF7F2; border-radius: 10px; box-shadow: 0 16px 32px rgba(36,20,48,.22); box-sizing: border-box; }
.dropdown--below .dropdown__menu { top: calc(100% + 6px); }
.dropdown--above .dropdown__menu { bottom: calc(100% + 6px); }
.dropdown__item { width: 100%; text-align: left; background: none; border: none; border-radius: 6px; padding: 8px 10px; font: inherit; color: #241430; cursor: pointer; }
.dropdown__item:hover, .dropdown__item:focus-visible { background: var(--accent); outline: none; }
.dropdown__item--danger { color: #a6355c; }
</style>

tailwind

<div class="relative min-h-[220px] px-6 py-[60px] box-border font-sans">
  <details open class="dropdown-tw dropdown-tw--below relative inline-block" style="--accent:#E8A020;--menu-width:200px;">
    <summary role="button" aria-haspopup="true" aria-expanded="true" class="list-none cursor-pointer inline-flex items-center gap-2 bg-[#FAF7F2] text-[#241430] border border-[#24143033] rounded-lg px-3.5 py-2.5 font-medium marker:hidden">
      Actions
      <svg width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </summary>
    <ul role="menu" class="dropdown-tw__menu absolute left-0 m-0 list-none rounded-[10px] bg-[#FAF7F2] shadow-2xl p-1.5 box-border" style="width:200px;">
      <li role="menuitem"><button type="button" class="w-full text-left bg-transparent border-none rounded-md px-2.5 py-2 font-inherit text-[#241430] cursor-pointer hover:bg-[var(--accent)] focus-visible:bg-[var(--accent)] focus-visible:outline-none">Duplicate</button></li>
      <li role="menuitem"><button type="button" class="w-full text-left bg-transparent border-none rounded-md px-2.5 py-2 font-inherit text-[#241430] cursor-pointer hover:bg-[var(--accent)] focus-visible:bg-[var(--accent)] focus-visible:outline-none">Rename</button></li>
      <li role="menuitem"><button type="button" class="w-full text-left bg-transparent border-none rounded-md px-2.5 py-2 font-inherit text-[#a6355c] cursor-pointer hover:bg-[var(--accent)] focus-visible:bg-[var(--accent)] focus-visible:outline-none">Delete</button></li>
    </ul>
  </details>
</div>
<style>
.dropdown-tw--below .dropdown-tw__menu { top: calc(100% + 6px); }
.dropdown-tw--above .dropdown-tw__menu { bottom: calc(100% + 6px); }
</style>

react

import { useState } from "react";

export function Dropdown({
  label = "Actions",
  open: initialOpen = true,
  placement = "below",
  accent = "#E8A020",
  width = 200,
}) {
  const [open, setOpen] = useState(initialOpen);
  const menuPos = placement === "above" ? { bottom: "calc(100% + 6px)" } : { top: "calc(100% + 6px)" };
  return (
    <div style={{ position: "relative", minHeight: 220, padding: "60px 24px", boxSizing: "border-box", fontFamily: "system-ui, sans-serif" }}>
      <style>{`.dropdown-react-item:hover, .dropdown-react-item:focus-visible { background: ${accent}; outline: none; }`}</style>
      <div style={{ position: "relative", display: "inline-block" }}>
        <button type="button" aria-haspopup="true" aria-expanded={open ? "true" : "false"} onClick={() => setOpen((o) => !o)}
          style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "#FAF7F2", color: "#241430",
            border: "1.5px solid #24143033", borderRadius: 8, padding: "9px 14px", fontWeight: 500, cursor: "pointer" }}>
          {label}
          <svg width="10" height="6" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        {open && (
          <ul role="menu" style={{ position: "absolute", left: 0, width, margin: 0, padding: 6, listStyle: "none",
            background: "#FAF7F2", borderRadius: 10, boxShadow: "0 16px 32px rgba(36,20,48,.22)", boxSizing: "border-box", ...menuPos }}>
            <li role="menuitem"><button type="button" className="dropdown-react-item" style={{ width: "100%", textAlign: "left", background: "none", border: "none", borderRadius: 6, padding: "8px 10px", font: "inherit", color: "#241430", cursor: "pointer" }}>Duplicate</button></li>
            <li role="menuitem"><button type="button" className="dropdown-react-item" style={{ width: "100%", textAlign: "left", background: "none", border: "none", borderRadius: 6, padding: "8px 10px", font: "inherit", color: "#241430", cursor: "pointer" }}>Rename</button></li>
            <li role="menuitem"><button type="button" className="dropdown-react-item" style={{ width: "100%", textAlign: "left", background: "none", border: "none", borderRadius: 6, padding: "8px 10px", font: "inherit", color: "#a6355c", cursor: "pointer" }}>Delete</button></li>
          </ul>
        )}
      </div>
    </div>
  );
}