Problem: Upload target.

Solution#

html
<label class="grid place-items-center gap-2 rounded-2xl border-2 border-dashed p-12 text-center hover:border-blue-500 hover:bg-blue-50 transition cursor-pointer">
  <span class="text-3xl">📁</span>
  <p class="font-medium">Drop files or click to browse</p>
  <p class="text-xs text-slate-500">PNG, JPG up to 10MB</p>
</label>

Why this works#

Dashed border + hover affordance.

Variants#

  • Responsive: add screen prefixes to the core classes
  • Dark: pair each color utility with its dark: twin
  • Animated: add transition + a state variant for motion

cookbook/index|Cookbook index · utilities/index|Utilities reference · patterns/index|Layout patterns