Drag

html

<div class="drag-demo">
  <div class="drag-demo__lane">Backlog</div>
  <div class="drag-demo__card is-dragging" style="--accent:#E8A020;--rot:4deg;" draggable="true">
    <span class="drag-demo__handle">&#8942;&#8942;</span>Design review
  </div>
  <p class="drag-demo__caption">shown mid-drag: lifted, rotated 4&deg;, shadow deepens{{unless dragging}}rest state &mdash; drag the handle to move it

tailwind

<div style="width:280px;font-family:system-ui,sans-serif;color:#241430">
  <div class="text-[11px] font-bold uppercase tracking-wide text-[#241430aa] mb-2">Backlog</div>
  <div draggable="true" class="drag-tw is-dragging flex items-center gap-2 px-3.5 py-3 rounded-lg cursor-grab motion-safe:transition-transform" style="background:#FAF7F2;border:1.5px solid #E8A020;box-shadow:0 2px 6px rgba(36,20,48,.1);--rot:4deg">
    <span class="font-bold tracking-tighter" style="color:#E8A020">&#8942;&#8942;</span>Design review
  </div>
  <p class="mt-3 text-xs text-[#241430aa]">shown mid-drag: lifted, rotated 4&deg;, shadow deepens{{unless dragging}}rest state &mdash; drag the handle to move it

react

export function DragDemo({
  label = "Design review",
  dragging = true,
  accent = "#E8A020",
  rotation = 4,
}) {
  return (
    <div style={{ width: 280, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em", color: "#241430aa", marginBottom: 8 }}>Backlog</div>
      <div draggable className="drag-card" style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 14px", borderRadius: 10, background: "#FAF7F2",
        border: "1.5px solid " + accent, cursor: dragging ? "grabbing" : "grab",
        transform: dragging ? "rotate(" + rotation + "deg) scale(1.03)" : "none",
        boxShadow: dragging ? "0 16px 30px rgba(36,20,48,.28)" : "0 2px 6px rgba(36,20,48,.1)" }}>
        <span style={{ color: accent, letterSpacing: -3, fontWeight: 700 }}>&#8942;&#8942;</span>{label}
      </div>
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430aa" }}>{dragging ? "shown mid-drag: lifted, rotated " + rotation + "\u00b0, shadow deepens" : "rest state \u2014 drag the handle to move it"}</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .drag-card { transition: transform .12s, box-shadow .12s; }
        }
      `}</style>
    </div>
  );
}