Tailwind Upload Forms by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <div class="relative min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 bg-gray-500 bg-no-repeat bg-cover relative items-center" style="background-image: url(https://cdn.pixabay.com/photo/2022/06/25/13/33/landscape-7283516_1280.jpg);"> <div class="absolute bg-black opacity-20 inset-0 z-0"></div> <div class="sm:max-w-lg w-full p-10 bg-white rounded-xl z-10"> <div class="text-center"> <h2 class="mt-5 text-3xl font-bold text-gray-900"> Image Upload! </h2> <p class="mt-2 text-sm text-gray-400">Upload Feature Image.</p> </div> <form class="mt-8 space-y-3" action="#" method="POST"> <div class="grid grid-cols-1 space-y-2"> <label class="text-sm font-bold text-gray-500 tracking-wide">Title</label> <input class="text-base p-2 border border-gray-300 rounded-lg focus:outline-none focus:border-indigo-500" type="" placeholder="Image Title"> </div> <div class="grid grid-cols-1 space-y-2"> <label class="text-sm font-bold text-gray-500 tracking-wide">Attach Document</label> <div class="flex items-center justify-center w-full"> <label class="flex flex-col rounded-lg border-4 border-dashed w-full h-60 p-10 group text-center"> <div class="h-full w-full text-center flex flex-col items-center justify-center items-center "> <div class="flex flex-auto max-h-48 w-2/4 mx-auto -mt-10"> <img class="h-36 object-center" src="https://cdn.pixabay.com/photo/2017/01/18/17/39/cloud-computing-1990405_1280.png" width="180" alt="Upload"> </div> <p class="pointer-none text-gray-500 "><span class="text-sm">Drag and drop</span> files here <br /> or <a href="" id="" class="text-blue-600 hover:underline">select a file</a> from your computer</p> </div> <input type="file" class="hidden"> </label> </div> </div> <p class="text-sm text-gray-300"> <span>Image type: JPGE, PNG, and WEBP</span> </p> <div> <button type="submit" class="my-5 w-full flex justify-center bg-blue-500 text-gray-100 p-4 rounded-full tracking-wide font-semibold focus:outline-none focus:shadow-outline hover:bg-blue-600 shadow-lg cursor-pointer transition ease-in duration-300"> Upload </button> </div> </form> </div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Image upload form component in Tailwind CSS, Features Drag and Drop image directly on form area. Catagory Tailwind Tags Card Responsive Resource Add External Stylesheets and Script <script src="https://cdn.tailwindcss.com"></script>
