Responsive contact form using TailwindCSS

Responsive contact form using TailwindCSS

First, we need to start a new HTML File. So create a file and the code for boilerplate and to use TailwindCSS.

<!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>Contact Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

</body>
</html>

Now let's create a div inside the body tag which spans the height and width with a background of amber-500

<div class="w-screen h-screen flex justify-center items-center bg-amber-500 text-center"></div>

Inside the div, we are gonna create another div that takes 5/6 (83.33%) of height and width so that it's responsive.

<div class="w-5/6 h-5/6"></div>

Inside this div first, we will create an h1 tag with text-center and text-3xl

<h1 class="text-3xl text-white text-center mt-4">Contact Us</h1>

We will create another div below the h1 which will allow us to input name and email

<div class=" mt-8 m-auto w-full md:flexallow,anthat,">
    <span class="flex w-full">
        <h2 class="ml-2 text-xl text-white ">Name: </h2>
        <input aria-label="name" class="shadow-xl ml-4 mr-2 bg-transparent border-2 rounded-2xl text-white text-2xl pl-2 w-full outline-none" type="text" name="name" id="name" required>
    </span>
    <span class="flex w-full mt-8 md:mt-auto">
        <h2 class="ml-2 text-xl text-white ">Email: </h2>
        <input aria-label="email" class="shadow-xl ml-4 mr-2 bg-transparent border-2 rounded-2xl text-white text-2xl pl-2 w-full outline-none" type="email" name="email" id="email" required>
    </span>
</div>

Let's create a contact number field and a message field below the above div

<div class="flex mt-8 m-auto w-full ">
    <span class="flex w-full">
        <h2 class="ml-2 text-2xl text-white ">Contact: </h2>
        <input aria-label="contact" class="shadow-xl ml-4 mr-2 bg-transparent border-2 rounded-2xl text-white text-2xl pl-2 w-full outline-none" type="number" name="conatct-number" id="conatct-number">
    </span>
</div>
<div class="flex mt-8 m-auto w-full ">
    <span class="w-full">
        <h2 class="ml-2 text-2xl text-white w-full">Message: </h2>
        <textarea aria-label="message"  class="shadow-xl ml-4 mr-4 bg-transparent border-2 rounded-xl text-white text-2xl pl-2 mt-2  w-11/12 outline-none resize-none h-5/6" type="" name="message" id="message"></textarea>
    </span>
</div>

Let's finally add the submit button

<button type="submit" class="bg-blue-500 text-white px-4 py-2 mt-12 rounded-3xl">
   Submit
</button>

So the final code is

<!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>Contact Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-screen h-screen flex justify-center items-center bg-yellow-500 text-center">
    <div class="w-5/6 h-5/6">
        <h1 class="text-3xl text-white text-center mt-4">Contact Us</h1>
        <div class=" mt-8 m-auto w-full md:flex">
            <span class="flex w-full">
                <h2 class="ml-2 text-xl text-white ">Name: </h2>
                <input aria-label="name" class="shadow-xl ml-4 mr-2 bg-transparent border-2 rounded-2xl text-white text-2xl pl-2 w-full outline-none" type="text" name="name" id="name" required>
            </span>
            <span class="flex w-full mt-8 md:mt-auto">
                <h2 class="ml-2 text-xl text-white ">Email: </h2>
                <input aria-label="email" class="shadow-xl ml-4 mr-2 bg-transparent border-2 rounded-2xl text-white text-2xl pl-2 w-full outline-none" type="email" name="email" id="email" required>
            </span>
        </div>
        <div class="flex mt-8 m-auto w-full ">
            <span class="flex w-full">
                <h2 class="ml-2 text-2xl text-white ">Contact: </h2>
                <input aria-label="contact" class="shadow-xl ml-4 mr-2 bg-transparent border-2 rounded-2xl text-white text-2xl pl-2 w-full outline-none" type="number" name="conatct-number" id="conatct-number">
            </span>
        </div>
        <div class="flex mt-8 m-auto w-full ">
            <span class="w-full">
                <h2 class="ml-2 text-2xl text-white w-full">Message: </h2>
                <textarea aria-label="message"  class="shadow-xl ml-4 mr-4 bg-transparent border-2 rounded-xl text-white text-2xl pl-2 mt-2  w-11/12 outline-none resize-none h-5/6" type="" name="message" id="message"></textarea>
            </span>
        </div>
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 mt-12 rounded-3xl">
            Submit
        </button>
    </div>
</div>
</body>
</html>

Now save the file and see it in your browser.

It now should look like this

Contact Form

That's all for today. Hope to see you in the next post.

Did you find this article valuable?

Support Aayush Biswas by becoming a sponsor. Any amount is appreciated!