 platform](https://res.cloudinary.com/practicaldev/image/fetch/s--eqNGYW4U--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3c812d4ub6wgl1lbu9m.png)
Being part of the digital era, most of our physical businesses or services are now available online. In fact, we usually enjoy some services that are only available online.
To benefit from this service, we are generally required to Sign In for it. Which is in most cases, creating an account on the site.
By definition, A sign-in form, is a web page, popup, or modal where users enter the information required to access that website’s services.
This helps the site track who needs and is currently using their services, and also collect some data that help them better their services.
In this tutorial, we are going to build this simple, yet awesome component. A sign-in form can have so many different forms. So I challenge you to look for other design, replicate it, and share it with us in the comment section.
For the time being, Let’s use the one I prepare for us, and get started.
Understanding the Task
It’s important to divide your work or design into small parts, I always do that, it helps me break it down into tiny components that I can easily implement, then join them together to form the bigger component. (I call it Divide and Conquer 😉).
But this time, we don’t need to do that, as the task is already somehow simple.
Let’s go straight to the implementation, and I believe from there you better understand what I mean.
Structure of Code
I generally have the same structure when it comes to designing components. I believe they somehow have the same root. 😃
This is how it goes
<body>
<!-- First Layer -->
<div>
<!-- Second Layer -->
<div>
<!--
Here Goes the content
-->
</div>
</div>
</body>
Now that we have a defined structure, let's build this component
Sign In Form Code
<!-- First Layer -->
<div class="w-full relative shadow shadow-[#4d49e8] max-w-[20rem] h-fit text-slate-900 text-xs bg-white pt-4 pb-6 px-10 md:px-12 rounded-lg [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">
<!-- Second Layer -->
<div>
<!-- Form Start -->
<div>
<!-- Header -->
<h2 class="text-3xl font-semibold my-6">Sign in</h2>
<!-- Username Input -->
<div class="font-semibold">
<h2 class="mb-1">Username or email</h2>
<input type="text" name="username" id="userName" class="border-slate-300 rounded w-[14rem] text-xs text-[#4d49e8]">
</div>
<!-- Password -->
<div class="my-4 font-semibold">
<h2 class="mb-1">Password</h2>
<input type="password" name="password" id="password" class="border-slate-300 rounded w-[14rem] text-xs text-[#4d49e8]">
</div>
<div class="flex items-center justify-between">
<!-- Sign Button -->
<div id="sign" class="text-white font-semibold bg-[#4d49e8] px-3 sm:px-5 py-2 sm:py-3 border border-[#4d49e8] hover:text-[#4d49e8] hover:bg-white cursor-pointer rounded-full w-fit">
<h2>Sign in</h2>
</div>
<!-- Forgot Password -->
<a href="" class="hover:underline text-[0.7rem] font-semibold">Forget your password?</a>
</div>
<div class="flex flex-col items-center font-semibold gap-y-2 mt-5">
<a href="" class="hover:underline">Don't have an account?</a>
<a href="" class="underline hover:no-underline">Sign up</a>
</div>
</div>
<!-- Form End -->
</div>
<!-- Second Layer End -->
</div>
<!-- First Layer End -->
This is kinda a lot of information there. Let’s break it down and understand exactly what we did up there.
Form Header
<!-- Form Start -->
<div>
<!-- Header -->
<h2 class="text-3xl font-semibold my-6">Sign in</h2>
The header is the text Sign in, we gave it a font-size of text-3xl made it bold with font-semibold and push the content around it by applying a margin-block of my-6
Form Inputs
<!-- Username Input -->
<div class="font-semibold">
<h2 class="mb-1">Username or email</h2>
<input type="text" name="username" id="userName" class="border-slate-300 rounded w-[14rem] text-xs text-[#4d49e8]">
</div>
<!-- Password -->
<div class="my-4 font-semibold">
<h2 class="mb-1">Password</h2>
<input type="password" name="password" id="password" class="border-slate-300 rounded w-[14rem] text-xs text-[#4d49e8]">
</div>
We have 2 inputs here, username or email and password input.😃
You might have noticed, we are applying the same styles to both of them. Regarding the inputs, we gave them a border of border-slate-300, with a border-radius of rounded, made the text extremely with text-xs, with a color of #4d49e8
Sign In Button and Forgot Password
<div class="flex items-center justify-between">
<!-- Sign Button -->
<div id="sign" class="text-white font-semibold bg-[#4d49e8] px-3 sm:px-5 py-2 sm:py-3 border border-[#4d49e8] hover:text-[#4d49e8] hover:bg-white cursor-pointer rounded-full w-fit">
<h2>Sign in</h2>
</div>
<!-- Forgot Password -->
<a href="" class="hover:underline text-[0.7rem] font-semibold">Forget your password?</a>
</div>
Not much to say in this part, a div with the text Sign in, the div container is rounded with a border of border-[#4d49e8] and a background or similar color which changes to white on hover (hover:bg-white).
Present Result
Presently, if you preview the result, you will have something like this 😅.
I know, it looks beautiful already. But let’s add something to make it more beautiful🥰
Extra Style
We don’t have that nice decorative background as per the design, but we can add it of course.
Also, we will be adding some extra properties to the body container to center our work and something extra
<body class="bg-[#edf3ff] flex items-center justify-center min-h-screen selection:text-white selection:bg-[#4d49e8] relative">
<!--First Layer-->
<div class="w-full relative shadow shadow-[#4d49e8] max-w-[20rem] h-fit text-slate-900 text-xs bg-white pt-4 pb-6 px-10 md:px-12 rounded-lg [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">
<!--Second Layer-->
<div>
<!--Form Start-->
<div class="relative after:content-[''] after:absolute after:sm:w-[105%] after:w-[95%] after:h-[150%] after:bg-[#4d49e8] after:rounded-lg after:z-[-1] after:-top-[5rem] after:sm:-right-[5rem] after:right-1">
Looks amazing, isn’t it ?😎
Conclusion
We just built a simple and responsive Sign-In Form component without opening our CSS file😃. Thanks to Tailwindcss.
Many employers will need such components to be added to their websites, and right now you should be proud that you are one of those few who know how to build it in less than 5mins, and you can do that without even leaving your HTML document 😎.
You can have a Live preview on Codepen or find the code on GitHub
Remember our challenge? Check on a new design of a Sign-In Form, code it, and share it with us in the comment section.
If you have any worries or suggestions, don’t hesitate to leave them in the comment section! 😊
See ya! 👋
Top comments (0)