Design a Survey Form in Tailwind CSS Last Updated : 23 Jul, 2024 Comments Improve Suggest changes Like Article Like Report In this project, we'll create a survey form using the HTML and style it with the Tailwind CSS. The survey form will collect user information such as name, email, age, role, recommendations known languages and frameworks, and comments or suggestions.Example: Implemenattion to design a survey form using Tailwind. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Survey Form </title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-green-500"> <h1 class="text-3xl text-center text-white font-bold mt-8"> GeeksforGeeks Survey Form </h1> <form id="form" class="bg-white max-w-lg mx-auto mt-8 p-8 rounded-lg shadow-lg"> <div class="mb-6"> <label for="name" class="block text-gray-700 font-bold mb-2"> Name </label> <input type="text" id="name" placeholder="Enter your name" required class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> </div> <div class="mb-6"> <label for="email" class="block text-gray-700 font-bold mb-2"> Email </label> <input type="email" id="email" placeholder="Enter your email" required class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> </div> <div class="mb-6"> <label for="age" class="block text-gray-700 font-bold mb-2"> Age </label> <input type="text" id="age" placeholder="Enter your age" required class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> </div> <div class="mb-6"> <label for="role" class="block text-gray-700 font-bold mb-2"> Which option best describes you? </label> <select name="role" id="role" required class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> <option value="student">Student</option> <option value="intern">Intern</option> <option value="professional">Professional</option> <option value="other">Other</option> </select> </div> <div class="mb-6"> <label class="block text-gray-700 font-bold mb-2"> Would you recommend GeeksforGeeks to a friend? </label> <div class="flex"> <label for="recommed-1" class="mr-4"> <input type="radio" id="recommed-1" name="recommed" class="mr-2">Yes </label> <label for="recommed-2" class="mr-4"> <input type="radio" id="recommed-2" name="recommed" class="mr-2">No </label> <label for="recommed-3"> <input type="radio" id="recommed-3" name="recommed" class="mr-2">Maybe </label> </div> </div> <div class="mb-6"> <label class="block text-gray-700 font-bold mb-2"> Languages and Frameworks known </label> <div class="grid grid-cols-2 gap-4"> <label for="inp-1"> <input type="checkbox" name="inp" class="mr-2">C </label> <label for="inp-2"> <input type="checkbox" name="inp" class="mr-2"> C++ </label> <label for="inp-3"> <input type="checkbox" name="inp" class="mr-2"> C# </label> <label for="inp-4"> <input type="checkbox" name="inp" class="mr-2"> Java </label> <label for="inp-5"> <input type="checkbox" name="inp" class="mr-2"> Python </label> <label for="inp-6"> <input type="checkbox" name="inp" class="mr-2"> JavaScript </label> <label for="inp-7"> <input type="checkbox" name="inp" class="mr-2"> React </label> <label for="inp-7"> <input type="checkbox" name="inp" class="mr-2"> Angular </label> <label for="inp-7"> <input type="checkbox" name="inp" class="mr-2"> Django </label> <label for="inp-7"> <input type="checkbox" name="inp" class="mr-2"> Spring </label> </div> </div> <div class="mb-6"> <label for="comment" class="block text-gray-700 font-bold mb-2"> Any comments or suggestions </label> <textarea name="comment" id="comment" required placeholder="Enter your comment here" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> </textarea> </div> <button type="submit" class="bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit </button> </form> <div id="message" class="hidden bg-white max-w-lg mx-auto mt-8 p-8 rounded-lg shadow-lg"> <p class="text-2xl text-center text-green-600 font-bold"> Thank you for submitting the form! </p> </div> <script> document.getElementById('form') .addEventListener('submit', function (event) { event.preventDefault(); document.getElementById('form').style.display = 'none'; document.getElementById('message').classList.remove('hidden'); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article Design a Survey Form in Tailwind CSS M maha123 Follow Improve Article Tags : JavaScript Web Technologies CSS Tailwind CSS Web Templates +1 More Similar Reads Design a Guestbook in Tailwind CSS The Guestbook is a web application designed to collect guest information including their name, address, mobile number, and room number. It provides a simple and intuitive interface for the users to input their details and view them in a list format. PrerequisitesHTMLTailwind CSSJavaScriptApproachIn 3 min read Design a Subscription Page in Tailwind CSS A subscription page is a web page where users can sign up to receive regular updates, newsletters, or services. It typically includes a form for users to enter their email address and possibly other details, along with a submit button. In this article, we will see how to design a subscription page u 2 min read Design a Login Modal in Tailwind CSS Tailwind CSS allows us to design styled and responsive awesome applications using pre-defined classes that enhance the look and feel of the application. For designing the Login Modal in Tailwind CSS, we can use utility classes that build the responsive user interface and clean elements. ApproachCrea 4 min read Design a Contact Form Using Tailwind CSS A Contact Form Builder is a web application that allows users to create custom contact forms for their websites with ease. This Tailwind project aims to build a user-friendly interface for creating and customizing contact forms.Approach:Design a simple and intuitive UI using the Tailwind CSS for the 2 min read Tailwind CSS Login Form Login forms in Tailwind CSS are sections of a document on websites that are used for user authentication, web security, accessibility, and to gain access to restricted areas. A typical login form consists of two input fields, i.e., one for the user’s username and the other for their password. It als 3 min read Like