Application
Application Empty States Upload data Dark
Live Preview
<div class="max-w-md text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="mx-auto size-20 text-gray-400 dark:text-gray-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"
/>
</svg>
<h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Upload your files</h2>
<p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
Drag and drop files here or click to browse your computer.
</p>
<label
for="files"
class="mt-6 block rounded-lg border-2 border-dashed border-gray-300 p-6 transition-colors hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800/50"
>
<span class="text-sm font-semibold text-indigo-600 dark:text-indigo-500">
Choose files
</span>
<input type="file" id="files" class="sr-only" />
</label>
<p class="mt-6 text-sm text-gray-700 dark:text-gray-200">
Maximum file size: 10MB. Supported formats: PDF, DOCX, XLSX
</p>
</div>