DEV Community

rohanjsx
rohanjsx

Posted on • Edited on

Build a Login/Signup Page with React & TailwindCSS

A Login/Signup page is something you will find in every modern application whether it is an E-Commerce website or a Social Media application. In this beginner-friendly tutorial, we will build a simple Login/Signup page where you the user can toggle between Login and Signup with a single click.

Prerequisites:

  • React Hooks (Basic)
  • CSS (Basic)

sign

App Setup

Follow this doc to setup React app with TailwindCSS. This will take around 1-2 minutes. Once done, create a 'pages' folder in the 'src' directory and create a 'Login.jsx' page in the folder. For now, we will simply return the Login component and render it from our App.jsx as such:

show

Later, you can implement routing in your App and render it as such:

route

Design Login Form

In our Login page, let's create state variables for our inputs and to toggle between Login & SignUp forms:

states

When isLogin is true, we will display the Login form and when it is false, we will display the SignUp form. Let's go ahead and style the Login form!

log

Let's go ahead and style them as such:

Our Login form can be divided into 4 parts:

  • Top (consisting App name and Sign In text)
  • Social Icons container
  • Inputs & Submit button
  • Bottom info paragraph with toggle

Top

Let's add a custom style for our socialIcon in the 'index.css':

social

Icons

Let's finish up by styling our inputs and the bottom section where we will add an onClick handler so that we can switch from 'Login' to 'Signup' on clicking the 'Create Account' paragraph.

button

toggler

Let's put it all together and create our LoginForm component:

complete

Similarly, we can go ahead and create our SignUp form component and customize it as per our need. For now, we will add an Username and an Avatar URL input field and change the background color for our SignUp Form:

register

To put it all together, we need to conditionally render the Login/Signup form based on the isLogin state as such:

switch

And just like that, we have our Login page setup where the user can switch between Login & Signup with a single click!
Feel free to customize it as your own and add animations and your app logo!

Resources:

TailwindCSS
React Hooks
Code Gist

Top comments (0)