Design for AIUpload-Dropzone
Upload-Dropzone: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.card-053 {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 320px;
padding: 32px 24px;
background: #f8fafc;
border: 2px dashed #cbd5e1;
border-radius: 16px;
font-family: system-ui,sans-serif;
color: #475569;
text-align: center;
cursor: pointer;
transition: background .2s,border-color .2s
}
.card-053 input {
display: none
}
.card-053 svg {
color: #64748b;
margin-bottom: 6px;
transition: transform .2s,color .2s
}
.card-053 b {
font-size: 14px;
color: #0f172a
}
.card-053 span {
font-size: 12px;
color: #94a3b8
}
.card-053:hover {
background: #eff6ff;
border-color: #3b82f6
}
.card-053:hover svg {
color: #3b82f6;
transform: translateY(-3px)
}
.card-053 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<label class="card-053">
<input type="file">
<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 16V4m0 0l-4 4m4-4l4 4M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2"/></svg>
<b>Drop files here or click to browse</b>
<span>PNG, JPG or SVG up to 10 MB</span>
</label>Prompt
Erstelle eine 320px Upload-Dropzone als Label um ein verstecktes Datei-Input: Hintergrund #f8fafc, 2px gestrichelter #cbd5e1 Rahmen, 16px Radius, Padding 32px 24px, zentriertes Spaltenlayout. Ein 32px Upload-Pfeil-SVG in #64748b, eine 14px fette Zeile "Drop files here or click to browse" in #0f172a und ein 12px Hinweis in #94a3b8. Beim Hover wird der Hintergrund #eff6ff, der Rahmen #3b82f6, das Icon wird blau und hebt sich 3px.