DEV Community

rohanjsx
rohanjsx

Posted on • Edited on

5 1

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

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s day—drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay