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>