DEV Community

Cover image for Create A Responsive Login Form in ReactJS and CSS
CodingNepal
CodingNepal

Posted on • Originally published at codingnepalweb.com

Create A Responsive Login Form in ReactJS and CSS

#webdev #react #css #beginners

Create A Responsive Login Form in ReactJS and CSS

This article was originally published at https://www.codingnepalweb.com.

Are you new to ReactJS and excited to create something simple and practical? Creating a login form is a great way to dive into ReactJS and CSS. This project will help you understand essential concepts like components, state management, and style while giving you a functional and stylish login interface.

In this blog post, I’ll guide you through creating a Responsive Login Form using ReactJS and CSS. This form includes important features such as email and password fields, a password toggle for better usability, and social login options for Google and Apple.

With this guide, you’ll learn how to manage form states, implement user-friendly features, and style your components to create a clean and responsive login form. Ready to get started? Let’s create it!

Video Tutorial to Create Login Form in ReactJS

If you prefer video tutorials, the YouTube video above is a great resource. It explains each line of code and provides comments to make the process of creating your ReactJS login form easy to follow. If you prefer reading or need a step-by-step guide, keep following this post.

Setting Up the Project

Before we start making the responsive login form with ReactJS and CSS, make sure you have Node.js installed on your computer. If you don’t have it, you can download and install it from the official Node.js website.

Create a Project Folder:

  • Make a new folder, for instance, “login-form”.
  • Open this folder in your VS Code editor.

Initialize the Project:

Open your terminal by pressing Ctrl + J and then use Vite to create a new React app with this command:

npm create vite@latest ./ -- --template react
Enter fullscreen mode Exit fullscreen mode

Install necessary dependencies and start the development server:

npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

If your project is up and running in your browser, congratulations! You’ve successfully set up your project. Now, let’s move on to the next step modifying folders and files.

Modify folder and CSS Files:

  • Remove the default assets folder and App.css file.
  • Download the logos and place them directly into your public folder. Ensure you only include the SVG logo files and not the logos folder itself.
  • Replace the content of index.css with the provided code. 
/* Importing Google Fonts - Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5F41E4;
}

#root {
  width: 100%;
  padding: 0.6rem;
}

.login-container {
  margin: 0 auto;
  max-width: 410px;
  padding: 2rem 1.5rem;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.login-container .form-title {
  text-align: center;
  font-size: 1.37rem;
  font-weight: 600;
  margin-bottom: 1.87rem;
}

.login-container .social-login {
  display: flex;
  gap: 1.31rem;
}

.social-login .social-button {
  display: flex;
  gap: 0.81rem;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.75rem 0;
  border-radius: 0.31rem;
  align-items: center;
  justify-content: center;
  background: #F9F8FF;
  border: 1px solid #D5CBFF;
  transition: 0.3s ease;
}

.social-login .social-button:hover {
  border-color: #5F41E4;
  background: #f1eff9;
}

.social-login .social-button .social-icon {
  width: 23px;
}

.login-container .separator {
  position: relative;
  margin: 1.5rem 0;
  text-align: center;
  background: #fff;
}

.login-container .separator span {
  z-index: 1;
  font-weight: 500;
  color: #6652BE;
  position: relative;
  background: #fff;
  font-size: 1.06rem;
  padding: 0 0.9rem;
}

.login-container .separator::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 100%;
  background: #bfb3f2;
}

.login-form .input-wrapper {
  height: 54px;
  width: 100%;
  position: relative;
  margin-bottom: 1.5rem;
}

.login-form .input-field {
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 1.06rem;
  border-radius: 0.31rem;
  border: 1px solid #bfb3f2;
  padding: 0px 1.25rem 0 3.12rem;
  transition: 0.2s ease;
}

.login-form .input-field:focus {
  border-color: #5F41E4;
}

.login-form .input-field::placeholder {
  color: #9284c8;
}

.login-form .input-wrapper i {
  position: absolute;
  top: 50%;
  height: 100%;
  display: flex;
  color: #a395e0;
  align-items: center;
  transform: translateY(-50%);
  transition: 0.2s ease;
}

.login-form .input-wrapper i:not(.eye-icon) {
  left: 0.93rem;
  pointer-events: none;
}

.login-form .input-field:focus ~ i:not(.eye-icon) {
  color: #5F41E4;
}

.login-form .input-wrapper i.eye-icon {
  display: none;
  right: 0.93rem;
  color: #917DE8;
  cursor: pointer;
  font-size: 1.25rem;
}

.login-form .input-wrapper .input-field:valid ~ .eye-icon {
  display: flex;
}

.login-form .forgot-password-link {
  display: block;
  width:fit-content;
  margin-top: -0.44rem;
}

.login-form .login-button {
  border: none;
  outline: none;
  width: 100%;
  height: 54px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 2.19rem;
  border-radius: 0.31rem;
  background: #5F41E4;
  transition: 0.3s ease;
}

.login-form .login-button:hover {
  background: #4320df;
}

.login-container .signup-prompt {
  text-align: center;
  font-size: 1.06rem;
  font-weight: 500;
  margin: 1.75rem 0 0.31rem;
}

.login-container a {
  color: #5F41E4;
  font-weight: 500;
  text-decoration: none;
}

.login-container a:hover {
  text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

Creating the Components

Within the src directory of your project, organize your files by creating a “components” folder. Inside the components folder, create the following files:

  • SocialLogin.jsx
  • InputField.jsx

Adding the Codes

Add the respective code to each newly created file. These files define the layout and functionality of the Login Form.

In components/SocialLogin.jsx, add the code to render social login buttons for Google and Apple.

const SocialLogin = () => {
  return (
    <div className="social-login">
      <button className="social-button">
        <img src="google.svg" alt="Google" className="social-icon" />
        Google
      </button>
      <button className="social-button">
        <img src="apple.svg" alt="Apple" className="social-icon" />
        Apple
      </button>
    </div>
  )
}

export default SocialLogin;
Enter fullscreen mode Exit fullscreen mode

In components/InputField.jsx, add the code for email and password fields, and the functionality to toggle password visibility.

import { useState } from "react";

const InputField = ({ type, placeholder, icon }) => {
  // State to toggle password visibility
  const [isPasswordShown, setIsPasswordShown] = useState(false);

  return (
    <div className="input-wrapper">
      <input
        type={isPasswordShown ? 'text' : type}
        placeholder={placeholder}
        className="input-field"
        required
      />
      <i className="material-symbols-rounded">{icon}</i>
      {type === 'password' && (
        <i onClick={() => setIsPasswordShown(prevState => !prevState)} className="material-symbols-rounded eye-icon">
          {isPasswordShown ? 'visibility' : 'visibility_off'}
        </i>
      )}
    </div>
  )
}

export default InputField;
Enter fullscreen mode Exit fullscreen mode

Finally, update the content of src/App.jsx with the provided code. It imports and uses these components to complete your login form.

import SocialLogin from "./components/SocialLogin";
import InputField from "./components/InputField";

const App = () => {
  return (
    <div className="login-container">
      <h2 className="form-title">Log in with</h2>
      <SocialLogin />

      <p className="separator"><span>or</span></p>

      <form action="#" className="login-form">
        <InputField type="email" placeholder="Email address" icon="mail" />
        <InputField type="password" placeholder="Password" icon="lock" />

        <a href="#" className="forgot-password-link">Forgot password?</a>
        <button type="submit" className="login-button">Log In</button>
      </form>

      <p className="signup-prompt">
        Don&apos;t have an account? <a href="#" className="signup-link">Sign up</a>
      </p>
    </div>
  )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

That’s it! If you’ve completed all the steps, you should now see your Login Form project in your browser. You can test it by entering an email and password, toggling password visibility, and trying out the social login options.

Conclusion and final words

Congratulations! You’ve successfully created a functional and stylish login form using ReactJS and CSS. With this project, you’ve practiced managing form states, adding user-friendly features, and applying CSS to create a beautiful look.

This is just the beginning! Consider expanding your form with additional features or integrating it with a backend for real-world use. For more inspiration, there are many other login form templates available on this website.

If you encounter any problems while creating your ReactJS login form, you can download the source code files for this project for free by clicking the “Download” button. You can also view a live demo of it by clicking the “View Live” button.

View Live Demo

Download Code Files

If you’ve found my content helpful, please consider buying me a coffee to support me in creating more content.

Buy Me A Coffee

Top comments (0)

Read next

midnightasc profile image

Elasticsearch with .NET Core Web API and Docker

Aarshdeep Singh Chadha -

shhdharmen profile image

Close Angular Material Dialog Programmatically

Dharmen Shah -

ridoy_hasan profile image

CSS Flexbox Deep Dive

Ridoy Hasan -

zain725342 profile image

The Power of Proxy

zain ul abdin -