File Upload SlideUp

A customizable file upload slideup component built with Tailwind CSS.

TailWrap.dev/preview

Usage

To use this component in your project, copy the code and paste it into your HTML file. You can customize the component by modifying the Tailwind CSS classes.

Copy the code

Paste into your project

Customize as needed

HTML


    <div class="relative w-full group">
      <div
        class="relative z-40 cursor-pointer group-hover:translate-x-8 group-hover:shadow-2xl group-hover:-translate-y-8 transition-all duration-500 bg-neutral-900 flex items-center justify-center h-32 w-32 mx-auto rounded-xl"
      >
        <svg
          class="h-6 w-6 text-white/60"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke-width="2"
          stroke="currentColor"
          fill="none"
          viewBox="0 0 24 24"
          height="24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
          <path d="M7 9l5 -5l5 5"></path>
          <path d="M12 4l0 12"></path>
        </svg>
      </div>
      <div
        class="absolute border opacity-0 group-hover:opacity-80 transition-all duration-300 border-dashed border-sky-400 inset-0 z-30 bg-transparent flex items-center justify-center h-32 w-32 mx-auto rounded-xl"
      ></div>
    </div>

Tailwind CSS v3.3

Responsive Behavior

This component is fully responsive and adapts to different screen sizes. Use the viewport controls above to preview how it looks on different devices.

Mobile

Optimized for screens smaller than 640px

Tablet

Optimized for screens between 640px and 1024px

Desktop

Optimized for screens larger than 1024px