Upload Area
Below you can find a button component styled with tailwindcss. Created with Figma design for Dark Mode only - Light Mode improvements awating on designs.
Upload Area - default state
- Preview
- HTML
- React
Attach file
Copy
<div class="relative">
<div class="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-dashed border-neutral-400 text-neutral-400 hover:border-neutral-500 hover:text-neutral-500 dark:hover:border-neutral-300 dark:hover:text-neutral-300">Attach file</div>
</div>
Copy
<div className="relative">
<div className="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-dashed border-neutral-400 text-neutral-400 hover:border-neutral-500 hover:text-neutral-500 dark:hover:border-neutral-300 dark:hover:text-neutral-300">Attach file</div>
</div>Upload Area - filled state
- Preview
- HTML
- React
Filename.jpg
Copy
<div class="relative">
<div class="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-solid border-black dark:border-white dark:text-white">Filename.jpg</div>
<button class="w-3 h-3 flex items-center justify-center rounded-full border-2 border-black dark:border-white block absolute -right-[12px] -top-[12px] bg-white dark:bg-theme-dark text-brand-primary-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="24" width="24">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 8.99998L9 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 15L9 8.99998"></path>
</svg>
</button>
</div>
Copy
<div className="relative">
<div className="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-solid border-black dark:border-white dark:text-white">Filename.jpg</div>
<button className="w-3 h-3 flex items-center justify-center rounded-full border-2 border-black dark:border-white block absolute -right-[12px] -top-[12px] bg-white dark:bg-theme-dark text-brand-primary-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="24" width="24">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 8.99998L9 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 15L9 8.99998"></path>
</svg>
</button>
</div>Upload Area - error state
- Preview
- HTML
- React
File weighs too much!
Copy
<div class="relative">
<div class="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-dashed border-neutral-400 text-danger">File weighs too much!</div>
</div>
Copy
<div className="relative">
<div className="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-dashed border-neutral-400 text-danger">File weighs too much!</div>
</div>