Drop Target

Element is a valid drop destination.

html

<div class="dz" style="--accent:#A8E6C1;border-radius:14px;" ondragover="event.preventDefault();this.classList.add('dz--live')" ondragleave="this.classList.remove('dz--live')" ondrop="event.preventDefault();this.classList.remove('dz--live')">
  <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11m0-11 4 4m-4-4-4 4M5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Drop files here</span>
</div>
<p class="dz-hint">No CSS pseudo-class exists for this either — drag something over the zone to fire real <code>dragover</code>, or force the accepting look above.</p>
<style>
.dz { width: 260px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 14px/1.5 system-ui, sans-serif; color: #24143099; background: #FAF7F2; border: 2.5px dashed #24143035; padding: 30px 16px; text-align: center; }
.dz--live, .dz--forced { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, #FAF7F2); color: #241430; }
.dz-hint { width: 260px; box-sizing: border-box; margin: 8px 0 0; font-size: 11px; color: #241430888; }
.dz-hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
</style>

tailwind

<div class="dz-tw w-[260px] box-border flex flex-col items-center gap-2 font-sans text-sm text-[#24143099] bg-[#FAF7F2] border-[2.5px] border-dashed border-[#24143035] px-4 py-[30px] text-center" style="border-radius:14px;" ondragover="event.preventDefault();this.classList.add('dz-tw--live')" ondragleave="this.classList.remove('dz-tw--live')" ondrop="event.preventDefault();this.classList.remove('dz-tw--live')">
  <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11m0-11 4 4m-4-4-4 4M5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <span>Drop files here</span>
</div>
<p class="w-[260px] box-border mt-2 text-[11px] text-[#241430]/55">No CSS pseudo-class exists for this either — drag something over the zone to fire real <code class="bg-[#24143012] px-1.5 py-0.5 rounded">dragover</code>, or force the accepting look above.</p>
<style>
.dz-tw--live, .dz-tw--forced { border-color: #A8E6C1; background: color-mix(in srgb, #A8E6C1 14%, #FAF7F2); color: #241430; }
</style>

react

import { useState } from "react";

export function DropTargetState({
  label = "Drop files here",
  accent = "#A8E6C1",
  force = false,
  radius = 14,
}) {
  const [live, setLive] = useState(false);
  const active = force || live;
  return (
    <div>
      <div
        onDragOver={(e) => { e.preventDefault(); setLive(true); }}
        onDragLeave={() => setLive(false)}
        onDrop={(e) => { e.preventDefault(); setLive(false); }}
        style={{
          width: 260, boxSizing: "border-box", display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
          font: "14px/1.5 system-ui, sans-serif", background: active ? `color-mix(in srgb, ${accent} 14%, #FAF7F2)` : "#FAF7F2",
          color: active ? "#241430" : "#24143099", border: `2.5px dashed ${active ? accent : "#24143035"}`,
          borderRadius: radius, padding: "30px 16px", textAlign: "center",
        }}
      >
        <svg width="26" height="26" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v11m0-11 4 4m-4-4-4 4M5 16v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
        <span>{label}</span>
      </div>
      <p style={{ width: 260, margin: "8px 0 0", fontSize: 11, color: "#241430888" }}>No CSS pseudo-class exists for this either — drag something over the zone to fire real drag events, or force the accepting look with the <code>force</code> prop.</p>
    </div>
  );
}