Skip to Content

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.

Preview - Upload Area - default state

Attach file
HTML
<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>
React
<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>

Preview - Upload Area - filled state

Filename.jpg
HTML
<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" width="8" height="8" viewBox="0 0 8 8" fill="none">
			<path d="M6.99998 0.999969L0.999985 6.99997" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M6.99998 6.99997L0.999985 0.999969" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</button>
</div>
React
<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" width="8" height="8" viewBox="0 0 8 8" fill="none">
			<path d="M6.99998 0.999969L0.999985 6.99997" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M6.99998 6.99997L0.999985 0.999969" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</button>
</div>

Preview - Upload Area - error state

File weighs too much!
HTML
<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>
React
<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>