Drop Zone

Area accepting dropped files.

Drag files here

or choose from your computer

html

<div class="dropz" data-state="Idle" style="--accent:#A8E6C1;">
  <span class="dropz__icon"><svg width="26" height="26" viewBox="0 0 26 26" aria-hidden="true"><path d="M13 17V5M8 10l5-5 5 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 19v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
  <p class="dropz__label">Drag files here</p>
  <label class="dropz__browse">
    or choose from your computer
    <input type="file" class="dropz__input" multiple />
  </label>
</div>
<style>
.dropz { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 320px; padding: 28px 20px; border-radius: 12px; box-sizing: border-box; border: 2px dashed #24143040; text-align: center; }
.dropz[data-state="Dragover"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, #FAF7F2); }
.dropz__icon { color: #24143077; display: inline-flex; margin-bottom: 8px; }
.dropz[data-state="Dragover"] .dropz__icon { color: var(--accent); }
.dropz__label { margin: 0 0 4px; font-weight: 700; }
.dropz__browse { display: inline-block; font-size: 13px; color: #24143099; text-decoration: underline; cursor: pointer; }
.dropz__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dropz__browse:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
</style>

tailwind

<div class="w-[320px] p-[28px_20px] rounded-xl box-border border-2 border-dashed border-[#24143040] text-center font-sans text-sm text-[#241430] bg-[#FAF7F2] dropz-tw" data-state="Idle">
  <span class="inline-flex text-[#24143077] mb-2 dropz-tw-icon"><svg width="26" height="26" viewBox="0 0 26 26" aria-hidden="true"><path d="M13 17V5M8 10l5-5 5 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 19v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
  <p class="m-0 mb-1 font-bold">Drag files here</p>
  <label class="inline-block text-[13px] text-[#241430]/60 underline cursor-pointer focus-within:outline focus-within:outline-2 focus-within:rounded" style="outline-color:#A8E6C1">
    or choose from your computer
    <input type="file" class="absolute w-px h-px overflow-hidden" style="clip:rect(0 0 0 0)" multiple />
  </label>
</div>
<style>
.dropz-tw[data-state="Dragover"] { border-color: #A8E6C1; background: color-mix(in srgb, #A8E6C1 18%, #FAF7F2); }
.dropz-tw[data-state="Dragover"] .dropz-tw-icon { color: #A8E6C1; }
</style>

react

export function DropZone({
  label = "Drag files here",
  hint = "or choose from your computer",
  state = "Idle",
  multiple = true,
  accent = "#A8E6C1",
}) {
  const dragover = state === "Dragover";
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: dragover ? `color-mix(in srgb, ${accent} 18%, #FAF7F2)` : "#FAF7F2", width: 320, padding: "28px 20px", borderRadius: 12, boxSizing: "border-box", border: `2px dashed ${dragover ? accent : "#24143040"}`, textAlign: "center" }}>
      <span style={{ color: dragover ? accent : "#24143077", display: "inline-flex", marginBottom: 8 }}>
        <svg width="26" height="26" viewBox="0 0 26 26" aria-hidden="true"><path d="M13 17V5M8 10l5-5 5 5" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /><path d="M4 19v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
      </span>
      <p style={{ margin: "0 0 4px", fontWeight: 700 }}>{label}</p>
      <label style={{ display: "inline-block", fontSize: 13, color: "#24143099", textDecoration: "underline", cursor: "pointer" }}>
        {hint}
        <input type="file" multiple={multiple} style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" }} />
      </label>
    </div>
  );
}