Css Text Field - Copy this React, Mui Component to your project

import React, { useState } from 'react'; import { AiOutlineMail, AiOutlinePhone } from 'react-icons/ai'; import { MdPersonOutline, MdOutlineCake } from 'react-icons/md'; import { FaTransgender, FaRegUserCircle } from 'react-icons/fa'; export default function CustomForm() { const [deceased, setDeceased] = useState(false); return ( <div className='max-w-4xl mx-auto p-5'> <h4 className='text-center font-bold mb-4 text-xl'>About You</h4> <div className='grid grid-cols-1 gap-4'> <div className='space-y-4'> <div className='flex items-center space-x-2'> <MdPersonOutline className='text-2xl' /> <span className='text-lg font-semibold'>Personal Details</span> </div> <div className='grid grid-cols-10 gap-4'> <input type="text" placeholder="Title" className='input input-bordered col-span-2' /> <input type="text" placeholder="First Name" className='input input-bordered col-span-3' /> <input type="text" placeholder="Middle Name" className='input input-bordered col-span-2.5' /> <input type="text" placeholder="Last Name" className='input input-bordered col-span-3' /> </div> </div> <div className='space-y-4'> <div className='flex items-center space-x-2'> <FaTransgender className='text-2xl' /> <span className='text-lg font-semibold'>Other Details</span> </div> <input type="text" placeholder="Gender" className='input input-bordered w-full' /> <input type="date" placeholder="Date of Birth" className='input input-bordered w-full' /> <label className='flex items-center space-x-2'> <input type="checkbox" checked={deceased} onChange={() => setDeceased(!deceased)} className='toggle' /> <span>Deceased</span> </label> {deceased && <input type="date" placeholder="Date Deceased" className='input input-bordered w-full' />} <input type="email" placeholder="Email" className='input input-bordered w-full' /> <input type="text" placeholder="Mobile" className='input input-bordered w-full' /> <input type="text" placeholder="Telephone" className='input input-bordered w-full' /> </div> </div> </div> ); }