DEV Community

Cover image for React Tailwind CSS Forgot Password Example
Aaronn
Aaronn

Posted on • Originally published at frontendshape.com

4

React Tailwind CSS Forgot Password Example

In this tutorial, we'll create a forgot password page in your React using Tailwind CSS. Before you begin, ensure your project has React, TypeScript, and Tailwind CSS installed and configured.
Install & Setup Tailwind CSS + React + Typescript + Vite

React Tailwind CSS Simple Forget Password

import { useState } from "react";

const ForgetPassword = () => {
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Forget password request submitted for email:", email);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="max-w-md w-full p-6 bg-white rounded-md shadow-md">
        <h2 className="text-2xl font-semibold mb-6">Forget Password</h2>
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label
              htmlFor="email"
              className="block text-gray-700 text-sm font-bold mb-2"
            >
              Email Address
            </label>
            <input
              type="email"
              id="email"
              className="w-full p-2 border rounded-md"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <button
            type="submit"
            className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
          >
            Reset Password
          </button>
        </form>
      </div>
    </div>
  );
};

export default ForgetPassword;
Enter fullscreen mode Exit fullscreen mode

forgot password page
Build a Forgot Password feature in React using TypeScript, Tailwind CSS, and React hooks.

import React, { useState, FormEvent, ChangeEvent } from "react";

const ForgetPassword: React.FC = () => {
    const [email, setEmail] = useState<string>("");

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();
        console.log("Forget password request submitted for email:", email);
    };

    const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
        setEmail(e.target.value);
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-100">
            <div className="max-w-md w-full p-6 bg-white rounded-md shadow-md">
                <h2 className="text-2xl font-semibold mb-6">Forget Password</h2>
                <form onSubmit={handleSubmit}>
                    <div className="mb-4">
                        <label
                            htmlFor="email"
                            className="block text-gray-700 text-sm font-bold mb-2"
                        >
                            Email Address
                        </label>
                        <input
                            type="email"
                            id="email"
                            className="w-full p-2 border rounded-md"
                            placeholder="Enter your email"
                            value={email}
                            onChange={handleEmailChange}
                            required
                        />
                    </div>
                    <button
                        type="submit"
                        className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
                    >
                        Reset Password
                    </button>
                </form>
            </div>
        </div>
    );
};

export default ForgetPassword;
Enter fullscreen mode Exit fullscreen mode

React Tailwind CSS ForgetPasswordForm with Link to Login Using React Router

import { useState } from 'react';
import { Link } from 'react-router-dom';

const ForgetPasswordForm = () => {
    const [email, setEmail] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Forget password request submitted for email:', email);
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-gray-100">
            <div className="max-w-md w-full p-6 bg-white rounded-md shadow-md">
                <h2 className="text-2xl font-semibold mb-6">Forget Password</h2>
                <form onSubmit={handleSubmit}>
                    <div className="mb-4">
                        <label htmlFor="email" className="block text-gray-700 text-sm font-bold mb-2">
                            Email Address
                        </label>
                        <input
                            type="email"
                            id="email"
                            className="w-full p-2 border rounded-md"
                            placeholder="Enter your email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            required
                        />
                    </div>
                    <button
                        type="submit"
                        className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
                    >
                        Reset Password
                    </button>
                </form>
                <div className="mt-4 text-sm">
                    <p>
                        Remember your password? <Link to="/login" className="text-blue-500">Login here</Link>
                    </p>
                </div>
            </div>
        </div>
    );
};

export default ForgetPasswordForm;
Enter fullscreen mode Exit fullscreen mode

forgot password link with react-router

React Tailwind CSS ForgetPasswordModal Using React Hook

See also React TypeScript Tailwind CSS Popup Modal Tutorial

import { useState } from "react";

const ForgetPasswordModal = () => {
  const [isModalOpen, setModalOpen] = useState(false);
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Forget password request submitted for email:", email);
    setModalOpen(false);
  };

  return (
    <div className="min-h-screen flex items-center justify-center ">
      <button
        onClick={() => setModalOpen(true)}
        className="bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600"
      >
        Forget Password
      </button>
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <div
            className="absolute inset-0 bg-black opacity-50"
            onClick={() => setModalOpen(false)}
          ></div>
          <div className="max-w-md w-full p-6 bg-white rounded-md shadow-md z-10 relative">
            <button
              onClick={() => setModalOpen(false)}
              className="absolute top-2 right-2 text-blue-500"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={1.5}
                stroke="currentColor"
                className="w-5 h-5"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
            <h2 className="text-2xl font-semibold mb-6">Forget Password</h2>
            <form onSubmit={handleSubmit}>
              <div className="mb-4">
                <label
                  htmlFor="email"
                  className="block text-gray-700 text-sm font-bold mb-2"
                >
                  Email Address
                </label>
                <input
                  type="email"
                  id="email"
                  className="w-full p-2 border rounded-md"
                  placeholder="Enter your email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
              </div>
              <button
                type="submit"
                className="w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
              >
                Reset Password
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

export default ForgetPasswordModal;
Enter fullscreen mode Exit fullscreen mode

forgot password modal



Sources
react useState (react.dev)
Tailwind CSS (tailwindcss.com)
reactrouter (reactrouter.com)

See Also

👉 How to Add Drag-and-Drop Image Upload with Dropzone in React Using Tailwind CSS

👉How to Use Toastify in React with Tailwind CSS

👉NextJS Alert Message Tutorial with Tailwind CSS

👉Create a Responsive Navbar React Tailwind CSS TypeScript

👉How Use Headless UI in React + Typescript + Tailwind

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video