Building a Responsive Login Page with React: A Step-by-Step Guide

In this tutorial, we will walk through the process of creating a responsive login page using React. The final result will be a clean and visually appealing login interface that adjusts seamlessly to various screen sizes.

Project Setup

Start by creating a new React app using Create React App. Open your terminal and run the following commands:

npx create-react-app responsive-login-page
cd responsive-login-page

Project Structure

Replace the contents of the src folder with the following code. The main components are Login and App, and styles are stored in the css folder.

// src/components/Login.js
import React, { useState } from 'react';
import '../css/style.css';
import ikoyi from '../images/ikoyi.jpeg';
import { BsEyeFill, BsEnvelopeAtFill, BsEyeSlashFill } from 'react-icons/bs';
import { NavLink } from 'react-router-dom';

export default function Login() {
  const [passwordVisible1, setPasswordVisible1] = useState(false);

  const togglePasswordVisibility1 = () => {
    setPasswordVisible1((prev) => !prev);
  };

  return (
    <>
      <div className="myGrid">
        <div className="column1">
          <img src={ikoyi} alt="Description of the image" />
          <h1 className="centeredText">Thrift Collector</h1>
        </div>
        <div className="column2">
          <div className="centeredDiv">
            <div className="logo">Logo</div>

            <div className="input-container">
              <input type="email" placeholder="Email" />
              <span className="icon1">
                <BsEnvelopeAtFill />
              </span>
            </div>
            <div className="input-container">
              <input
                type={passwordVisible1 ? 'text' : 'password'}
                placeholder="Password"
              />
              <span className="icon1" onClick={togglePasswordVisibility1}>
                {passwordVisible1 ? <BsEyeSlashFill /> : <BsEyeFill />}
              </span>
            </div>
            <div className="forg">
              <p>
                <NavLink to="/forgot" className="bt decor">
                  Forgot Password?
                </NavLink>
              </p>
            </div>

            <NavLink to="/home">
              <button className="buttoner">Login</button>
            </NavLink>

            <p>
              Don't have an account?{' '}
              <NavLink to="/" className="bt decor">
                Register
              </NavLink>
            </p>
          </div>
        </div>
      </div>
    </>
  );
}

/* src/css/style.css */
/* Add your styles here */

Responsive Styling

Add the following styles to your style.css file inside the src/css folder:

/* src/css/style.css */
* {
  box-sizing: border-box;
}

body {
  background-color: #003d99;
  margin: 0;
  padding: 0;
}

.myGrid {
  display: grid;
  grid-template-columns: 0% 100%;
  grid-gap: 0px;
}

.column1 {
  grid-column: 1 / span 1;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.column1 img {
  width: 100%;
  height: 100%;
  background-size: contain;
}

.centeredText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 44px; /* Adjust the font size as needed */
  text-align: center;
}

.column2 {
  grid-column: 2 / span 1;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.centeredDiv {
  text-align: center;
  border: 0px solid black;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px 10px;
  max-width: 400px; /* Adjust max-width as needed */
  width: 100%;
}

.logo {
  height: 60px;
  width: 60px;
  border-radius: 100%;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 10px;
}

.input-container {
  margin-bottom: 20px;
  position: relative;
}

.input-container input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.icon1 {
  position: absolute;
  right: 5px;
  top: 10px;
}

.buttoner {
  width: 100%;
  background-color: teal;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Add more media queries for different screen sizes if needed */
@media (min-width: 992px) {
  .myGrid {
    display: grid;
    grid-template-columns: 70% 30%;
    grid-gap: 0px;
  }
}

Meta Tag Update

In your public/index.html, update the meta tag:

<!-- Change this line -->
<!-- <meta name="

viewport" content="width=device-width, initial-scale=1" /> -->
<!-- To -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

Feel free to customize the code and styles based on your preferences and project requirements.