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 18+ 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;
react tailwind css 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;
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;
react tailwind css 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;
react tailwind forgot password modal
Related Posts
React TypeScript Tailwind CSS Popup Modal Tutorial
How to Use Toastify in React with Tailwind CSS
React with Tailwind CSS File Upload Example
Create a Responsive Navbar React Tailwind CSS TypeScript
How to Add Drag-and-Drop Image Upload with Dropzone in React Using Tailwind CSS
