LV
Lương Vũ

Auth Form - Copy this React, Tailwind Component to your project

import React from "react"; function Profile() { return ( <div className="bg-gray-100 p-4"> <div className="bg-white p-6 rounded shadow"> <h2 className="text-xl font-bold mb-4">Thông tin cá nhân</h2> <form className="space-y-4"> {/* Họ và tên */} <div> <label className="block mb-1 font-medium">Họ và tên</label> <input type="text" className="w-full border rounded px-3 py-2 focus:outline-none focus:ring focus:border-blue-300" placeholder="Nhập họ và tên" /> </div> {/* Email */} <div> <label className="block mb-1 font-medium">Email</label> <input type="email" className="w-full border rounded px-3 py-2 focus:outline-none focus:ring focus:border-blue-300" placeholder="Nhập email" /> </div> {/* Tiểu sử */} <div> <label className="block mb-1 font-medium">Tiểu sử</label> <textarea className="w-full border rounded px-3 py-2 focus:outline-none focus:ring focus:border-blue-300" placeholder="Giới thiệu về bản thân" /> </div> {/* Số điện thoại */} <div> <label className="block mb-1 font-medium">Số điện thoại</label> <input type="text" className="w-full border rounded px-3 py-2 focus:outline-none focus:ring focus:border-blue-300" placeholder="Nhập số điện thoại" /> </div> {/* Nút lưu thông tin */} <button type="submit" className="bg-primary text-white px-4 py-2 rounded hover:bg-blue-700"> Lưu thông tin </button> </form> </div> </div> ); } export default Profile;

Prompt
Component Preview

About

AuthForm - A user-friendly login and registration form with role selection, input validation, and toast notifications, built with React. Get free template!

Share

Last updated 1 month ago