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
That's all for today. Hope to see you in the next post.