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;
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
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;
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
Top comments (0)