How to create and Style a Responsive Form using Tailwind CSS
Tags: css, tailwindcss, programming, webdev
Published: 2021-10-10 01:13:55

---
title: How to create and Style a Responsive Form using Tailwind CSS
published: true
date: 2021-01-10 01:16:04 UTC
tags: [css, tailwindcss, programming, webdev]
canonical_url: https://www.devwares.com/blog//how-to-create-and-style-a-responsive-form-using-tailwindcss
cover_image: https://www.devwares.com/blog/images/responsive-form-using-tailwind-css.png
---

If you are one of those keeping in the trend of CSS framework, you will notice that tailwind CSS is fast growing in popularity among developers around the world.  

It’s different from the other CSS framework in that it makes use of utility-first classes.
In today’s tailwind CSS tutorial, we will be creating a responsible form using Tailwind CSS.
The tailwind CSS form will look like the image below.

![Tailwind CSS Form](https://www.devwares.com/blog/images/responsive-form-using-tailwind-css2.png)
 

## Table of content 

- Prerequisites
- Add Tailwind CSS to project 
- Adding a logo to the Tailwind CSS form
- Adding the Tailwind CSS form input fields
- Adding the button
- Overview of everything 
- Conclusion 

## Prerequisites

- Latest version of Tailwind CSS 
- Basic knowledge of HTML
- Basic knowledge of Tailwind CSS

Add Tailwind CSS to project
For us to be able to build our Tailwind CSS form, we must first install it. You can check our article on how to go about this here, or you can check out the Tailwind CSS docs.

Once the Tailwind CSS is installed, we can link the Tailwind CSS stylesheet to our page by using the link tag on our head element, as shown below.

**Code:**

```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>Login form</title>
    <link rel="stylesheet" href="style.css">
</head>
```

Now, we can build the rest of our login form. 
Adding a logo to the Tailwind CSS form

At this stage, we can go ahead to add some styles to the body of our page. This Tailwind CSS style will serve everything inside our page. 

**Code:**

``` html
<body class="bg-gray-300" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">.
```

Furthermore, we can go ahead to add the logo to our Tailwind CSS login form.

**Code:**

```html
  <div class="h-screen flex items-center justify-center">
        <form action="" class="w-full md:w-1/3 bg-white rounded-lg items-center">
            <div class="flex font-bold justify-center mt-6">
                <img src="images/avater1.png" alt="" class="h-24 w-24">
            </div>
            <h2 class="text-3xl text-center text-gray-700 mb-4">Welcome Back!</h2>.
```

In the code above, we added the header for our form and the image of the header.  Some of the tailwind CSS classes we included on this page include
- Flex which allows items to shrink and grow to prevent overflow
- w-full gives the form a width of 100%
- bg-white sets the background to white
- rounded-lg gives the edge of the form a rounded look
- md:w-1/3 sets the minimum width to 33.333%
- mt-6, which sets the top margin to 24px
and many other classes included.
 
The login form at this stage should look like the image below.
 
![Tailwind CSS Form](https://www.devwares.com/blog/images/responsive-form-using-tailwind-css3.png)

## Adding the Tailwind CSS form input fields
 
The next step will be to add the input fields and style them using Tailwind CSS.

**Code:**

```html
 <div class="px-12 pb-10">
                <div class="w-full mb-2">
                    <div class="flex justify-center">
                        <input type="text" placeholder="Username"
                            class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none items-center">
                    </div>
                </div>
                <div class="w-full mb-2">
                    <div class="flex justify-center">
                        <input type="password" placeholder="Password"
                            class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none">
                    </div>
                </div>
```

In our code, we made two inputs Username and Password. We also styled them the same way. Using some Tailwind CSS classes  like 
- Border which sets the width of the input to 1px 
- Px-8 set the left and right padding to 32px while py-2 sets the top and bottom margin to 8px

The image of our project at this point should look like the image below.

![Tailwind CSS Form](https://www.devwares.com/blog/images/responsive-form-using-tailwind-css4.png) 


## Adding the button
For the final step, we need to add the button that the user will click to log in. We are also going to include a forget password and create an account link below our button.

**Code:**

```html
 <button class="w-full mt-6 py-2 rounded bg-purple-500 text-gray-100 focus:outline-none">Log In</button>
                <a href="#"
                    class="text-sm text-opacity-200 float-right mt-6 mb-4 hover:text-purple-600 underline">
                        Forget Password?
                </a>
                <a href="#" class="text-sm text-opacity-200 float-left mt-6 mb-8 hover:text-purple-600 underline">
                    Create Account
                </a>
            </div>
    </div>
</body>
</html>
```

The classes we added to the button will have rounded borders with a purple background color, full width, outline focus with padding and margins.

Our web page should look like the image below.

![Tailwind CSS Form](https://www.devwares.com/blog/images/responsive-form-using-tailwind-css5.png)
 

## Overview of everything 

If you have made mistakes while coding due to the wrong usage of “div” or didn’t place a tag well. You can check our complete code below.

**Code:**

```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>Login form</title>
    <link rel="stylesheet" href="style.css">
</head>

<body class="bg-gray-300"
    style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;">
    <div class="h-screen flex items-center justify-center">
        <form action="" class="w-full md:w-1/3 bg-white rounded-lg items-center">
            <div class="flex font-bold justify-center mt-6">
                <img src="images/avater1.png" alt="" class="h-24 w-24">
            </div>
            <h2 class="text-3xl text-center text-gray-700 mb-4">Welcome Back!</h2>
            <div class="px-12 pb-10">
                <div class="w-full mb-2">
                    <div class="flex justify-center">
                        <input type="text" placeholder="Username"
                            class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none items-center">
                    </div>
                </div>
                <div class="w-full mb-2">
                    <div class="flex justify-center">
                        <input type="password" placeholder="Password"
                            class="px-8 w-full border rounded py-2 text-gray-700 focus:outline-none">
                    </div>
                </div>
                 <button class="w-full mt-6 py-2 rounded bg-purple-500 text-gray-100 focus:outline-none">Log In</button>
                <a href="#"
                    class="text-sm text-opacity-200 float-right mt-6 mb-4 hover:text-purple-600 underline">
                        Forget Password?
                </a>
                <a href="#" 
                    class="text-sm text-opacity-200 float-left mt-6 mb-8 hover:text-purple-600 underline">
                        Create Account
                </a>
            </div>
    </div>
</body>

</html>
```

###Conclusion

In today Tailwind CSS tutorial practice, we built a login form using Tailwind CSS. The tailwind CSS form had an image, two inputs (Username and Password) and a login button.  
However, we styled our Tailwind CSS form using a CSS framework called Tailwind CSS.
I hope you enjoyed the Tailwind CSS tutorial.

## Design and code tailwind css websites 3x faster

We created a tool to visually build tailwind css components, prototypes, websites, and webapps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)

## Resources

- [Link to the Github Code](https://github.com/Iheanacho-ai/Tailwind-react-modal)

- [Link to the Tailwind CSS Modals Docs](https://tailwindui.com/components/application-ui/overlays/modals)

- [Get Tailwind CSS PRO](https://tailwindui.com/pricing)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Link to the modal documentation](https://www.devwares.com/docs/contrast/javascript/components/modal)

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table](https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to use Tailwind CSS Width](https://www.devwares.com/blog/Tailwind-width/)
- [Tailwind CSS Colors 3.0](https://www.devwares.com/blog/How-to-add-color-to-Tailwind/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)