Contact Form in Tailwind by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <div class="max-w-lg lg:ms-auto mx-auto text-center bg-gray-400 "> <div class="py-16 px-8 rounded-md bg-white"> <form class="" action="" method="POST"> <div class="grid md:grid-cols-2 grid-cols-1 gap-6"> <input type="text" id="fname" name="fname" placeholder="Name" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-700 "> <input type="text" id="fname" name="fname" placeholder="Phone No" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-700"> <div class="md:col-span-2"> <input type="email" id="email" name="email" placeholder="E-mail" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-700"> </div> <div class="md:col-span-2"> <label for="subject" class="float-left block font-normal text-gray-400 text-lg">Select</label> <select id="subject" name="subject" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-700"> <option value="" disabled selected>Select 1</option> <option value="Option-1">Select 2</option> <option value="Option-2">Select 3</option> <option value="Option-3">Select 4</option> <option value="Option-4">Select 5</option> </select> </div> <div class="md:col-span-2"> <label for="subject" class="float-left block font-normal text-gray-400 text-lg">Attach file pdf and jpg format</label> <input type="file" id="file" name="file" placeholder="Charger votre fichier" class="peer block w-full appearance-none border-none bg-transparent py-2.5 px-0 text-sm text-gray-900 focus:border-blue-600 focus:outline-none focus:ring-0"> </div> <div class="md:col-span-2"> </div> <div class="md:col-span-2"> <button class="py-3 text-base font-medium rounded text-white bg-blue-800 w-full hover:bg-blue-700 transition duration-300">Send form</button> </div> </div> <!-- Grid End --> </form> </div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Contact form in tailwind css. Catagory Tailwind Tags CSS Card Resource Add External Stylesheets and Script <link href="https://unpkg.com/tailwindcss@1.4.6/dist/tailwind.min.css" rel="stylesheet">
