DEV Community

Cover image for React Tailwind CSS Forgot Password Example
Aaronn
Aaronn

Posted on • Originally published at frontendshape.com

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

Top comments (0)