Designing a Form with Tailwind CSS
• Shallom Kyle Jacinto
April 21st 2021 • 3 minute read
In this article we will create a modern form with tailwind css, a utility-first CSS framework that you can create your own unique beatiful designs.
Prerequisite
Tailwind setup
Already know to setup tailwind css or you can go to here.
Skeleton form
First we need to create a skeleton form to create our structure to design. You can copy my below form codes or you can create with your own.
<div>
<form>
<h2>Login</h2>
<p> Sign in with your username and password. </p>
<label>Username :</label>
<input type="text" placeholder="Username"> <br>
<label>Password :</label>
<input type="password" placeholder="password"> <br>
<input type="submit" value="Login">
</form>
</div>
Then our div tag, we add some classes like paddings background colors shadows and border radius.
<div class="px-6 py-4 bg-gray-50 rounded-lg shadow">
<form>...</form>
</div>
Then in our heading text, we add a class of text-gray-700 so the color isn't too dark, and to our description text we add a class of my-3 so there will be a margin in top and bottom.
<form>
<h2 class="text-gray-700">Log in</h2>
<p class="text-gray-700 my-3">Sign in with your username and password.</p>
</form>
Inputs
In our label tags we add a class of block so the label tag will be displayed as block and added a classes of text-gray-700 and a margin in button mb-2.
In our input tag we add a class of mb-2 so there will be a margin in button, w-full so our input width will set to full according to the width viewport, and add some paddings px-4 py-2 and disabling the border border-0, add a class of rounded to make our input rounded and outline-none.
To add background color if the mouse is hovering the inputs then you need to add a class of hover:bg-blue-50, and add some borders in input if the mouse pointer is focus on input focus:ring-2 focus:ring-blue-600
And finally we add a class of transition-all so there will be an animation, a duration of 200 duration-200, and a transition timing ease-out.
<label class="block text-gray-700 mb-2">Username :</label>
<input type="text" placeholder="Username" class="transition-all duration-200 ease-out mb-2 w-full px-4 py-2 rounded border-0 outline-none hover:bg-blue-50 focus:ring-2 focus:ring-blue-600"> <br>
And it should look like this
And if we focus the input, it should look like on picture below
And finally for our login button, we add some classes like margins, paddings, colors and transitions.
<button type="submit" class="transition-all duration-200 ease-out mt-3 px-4 py-1 w-full rounded-lg border-0 bg-blue-600 text-base text-white outline-none hover:bg-blue-700 focus:ring-2 focus:ring-blue-400">Login</button>
Our form will look like this on a picture below
Complete code
<div class="px-6 py-4 bg-gray-50 rounded-lg shadow">
<form>
<h2 class="text-gray-700">Log in</h2>
<p class="text-gray-700 my-3">Sign in with your username and password.</p>
<label class="block text-gray-700 mb-2">Username :</label>
<input type="text" placeholder="Username" class="transition-all duration-200 ease-out mb-2 w-full px-4 py-2 rounded border-0 outline-none hover:bg-blue-50 focus:ring-2 focus:ring-blue-600"> <br>
<label class="block text-gray-700 mb-2">Password :</label>
<input type="password" placeholder="password" class="transition-all duration-200 ease-out mb-2 w-full px-4 py-2 rounded border-0 outline-none hover:bg-blue-50 focus:ring-2 focus:ring-blue-600"> <br>
<button type="submit" class="transition-all duration-200 ease-out mt-3 px-4 py-1 w-full rounded-lg border-0 bg-blue-600 text-base text-white outline-none hover:bg-blue-700 focus:ring-2 focus:ring-blue-400">Login</button>
</form>
</div>