Untitled

const styles = {
     
    width:"600px",
    border:"black",
    borderRadius: "10px",
    background:"bg-gray-200",
    boxShadow: "0px 0px 5px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.2)",
    
  }


  return (
  <>
    <ToastContainer />
  
    
    <div className="flex flex-col items-center justify-center h-screen mb-10">
  <form onSubmit={handleSubmit} className="shadow-md rounded px-8 pt-6 pb-8 mt-28" style={styles}>
    <div className="mb-4">
      <label className="block text-gray-700 font-bold mb-1" htmlFor="name">
        Full Name
        <span className="text-red-500">*</span>
      </label>
      <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" name="name" value={formData.name} onChange={handleChange} placeholder="Your Name" required />
    </div>
    <div className="mb-4">
      <label className="block text-gray-700 font-bold mb-1" htmlFor="phoneNo">
        Phone Number
        <span className="text-red-500">*</span>
      </label>
      <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" name="phone" value={formData.phone} onChange={handleChange} placeholder="Mobile" required />
    </div>
 

        <div className="mb-4">
          <label className="block text-gray-700 font-bold mb-1" htmlFor="dob">
            Date of Birth
            <span className="text-red-500">*</span>
          </label>
          <input
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            name="dob"
            type="date"
            value = {formData.dob}
            onChange={handleChange}
            placeholder="date"
            required
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700 font-bold mb-1" htmlFor="email">
            Email
            <span className="text-red-500">*</span>
          </label>
          <input
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            name="email"
            type="email"
            placeholder="Email Id"
            value={formData.email}
            onChange={handleChange}
            required
          />
        </div>

        <div className="mb-4">
          <label className="block text-gray-700 font-bold mb-1" htmlFor="street">
            Mailing Home Address
            <span className="text-red-500">*</span>
          </label>
          <div className="mb-3">
            <input
              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
              name="street"
              type="text"
              placeholder="Street Address"
              value={formData.street}
              onChange={handleChange}
              required
          />
          </div>
          <div className="mb-3">
            <div className="flex space-x-4">
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                name="city"
                type="text"
                placeholder="City"
                value={formData.city}
                onChange={handleChange}
                required
              />
              <input
                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                name="pin"
                type="text"
                placeholder="Pincode"
                value={formData.pin}
                onChange={handleChange}
                required
            />
            </div>
          </div>
          <select
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            name="state"
            value={formData.state}
            onChange={handleChange}
            required
          >
            <option value="">--Select State--</option>
            <option value="Andhra Pradesh">Andhra Pradesh</option>
            <option value="Arunachal Pradesh">Arunachal Pradesh</option>
            
          </select>

        </div>

        <div className="mb-4">
          <label className="block text-gray-700 font-bold mb-1" htmlFor="accountType">
            Account Type
            <span className="text-red-500">*</span>
          </label>
          <select
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
            name="accountType"
            value={formData.accountType}
            onChange={handleChange}
            required
          >
            <option value="">--Select Account Type--</option>
            <option value="Savings">Savings</option>
            <option value="Current">Current</option>
            <option value="Fixed Deposit">Fixed Deposit</option>
          </select>
        </div>

        <div className="flex items-center justify-center">
          <button
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            type="submit"
          >
            Submit Request
          </button>
        </div>
      </form>
    </div>
    </>
  )
}

export default Page4