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.
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;
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 ForgetPasswordModal Using React Hook
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;
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
