Responsive login form using Tailwind CSS in React

Creating a login form is one of the most common tasks in web development. With the help of Tailwind CSS, we can easily create a responsive login form in React. Tailwind CSS provides a variety of pre-designed classes that can be used to style the form components.

The responsive login form can be designed using the mobile-first approach with the help of Tailwind CSS. We can use the built-in Tailwind classes to design form elements such as input fields, labels, buttons, and other form components. Additionally, we can use responsive utilities classes provided by Tailwind to adjust the form elements' size, font size, and other attributes based on the screen size. This ensures that the login form looks great on all screen sizes, including desktops, tablets, and mobile devices.

Demo Application

Output - Responsive login form using Tailwind CSS in React - Clue Mediator

Responsive login form using Tailwind CSS in React

1. Project structure
2. Package dependencies
3. Implementation
4. Output

1. Project structure

• responsive-login-form-tailwind-react-app

  • node_modules

  • public

    • index.html

  • src

    • App.js
    • index.css
    • index.js

  • package-lock.json

  • package.json

  • README.md

2. Package dependencies

Run the following command to install tailwindcss npm package.

npm i tailwindcss

You will find the version of the following packages in React application.

react

^18.2.0

tailwindcss

^3.2.7

We need to set up Tailwind CSS in our React project. Kindly refer to the following article for the steps on how to set up Tailwind CSS.
Getting started with Tailwind CSS in React

3. Implementation

Refer to the following files for implementation.

App.js

import React from 'react';

function App() {
  return (
    <section class="h-screen flex flex-col md:flex-row justify-center space-y-10 md:space-y-0 md:space-x-16 items-center my-2 mx-5 md:mx-0 md:my-0">
      <div class="md:w-1/3 max-w-sm">
        <img src="https://tecdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp" alt="Sample image">
      </div>
      <div class="md:w-1/3 max-w-sm">
        <div class="text-center md:text-left">
          <label class="mr-1">Sign in with</label>
          <button type="button" class="mx-1 h-9 w-9 rounded-full bg-blue-600 hover:bg-blue-700 text-white shadow-[0_4px_9px_-4px_#3b71ca]">
            <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
            </svg>
          </button>
          <button type="button" class="inlne-block mx-1 h-9 w-9 rounded-full bg-blue-600 hover:bg-blue-700 uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca]">
            <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
            </svg>
          </button>
        </div>
        <div class="my-5 flex items-center before:mt-0.5 before:flex-1 before:border-t before:border-neutral-300 after:mt-0.5 after:flex-1 after:border-t after:border-neutral-300">
          <p class="mx-4 mb-0 text-center font-semibold text-slate-500">Or</p>
        </div>
        <input class="text-sm w-full px-4 py-2 border border-solid border-gray-300 rounded" type="text" placeholder="Email Address">
        <input class="text-sm w-full px-4 py-2 border border-solid border-gray-300 rounded mt-4" type="password" placeholder="Password">
        <div class="mt-4 flex justify-between font-semibold text-sm">
          <label class="flex text-slate-500 hover:text-slate-600 cursor-pointer">
            <input class="mr-1" type="checkbox">
            <span>Remember Me</span>
          </label>
          <a class="text-blue-600 hover:text-blue-700 hover:underline hover:underline-offset-4" href="#">Forgot Password?</a>
        </div>
        <div class="text-center md:text-left">
          <button class="mt-4 bg-blue-600 hover:bg-blue-700 px-4 py-2 text-white uppercase rounded text-xs tracking-wider" type="submit">Login</button>
        </div>
        <div class="mt-4 font-semibold text-sm text-slate-500 text-center md:text-left">
          Don't have an account? <a class="text-red-600 hover:underline hover:underline-offset-4" href="#">Register</a>
        </div>
      </div>
    </section>
  );
}

export default App;

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: Arial, Helvetica, sans-serif;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <react class="strictmode">
    <app>
  </app></react>
);

4. Output

Run your application and check the output in the browser.

That's it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository