Form Validation

<div class="checkout-detail">
  <form class="theme-form flex flex-col gap-4 !m-0">
     <div>
         <label for="email1>Email</label> 
         <input type="email" id="email2" placeholder='Enter your email id' required=''></input> 
     </div>
     <div class="relative">
         <label for="password>Password</label> 
         <input type="text" id="password" placeholder='Enter your password' required=''></input> 
         <div class="password-icon">
            <i data-feather="eye" class="feather-eye  cursor-pointer w-4 h-4 stroke-title right-[25px] rtl:right-unset top-1/2 rtl:left-[25px] absolute -translate-y-1/2"> REMIND ME LATER </i>
            <i data-feather="eye-off" class="feather-eye-off  cursor-pointer w-4 h-4 stroke-title right-[25px] rtl:right-unset top-1/2 rtl:left-[25px] absolute -translate-y-1/2"> REMIND ME LATER </i>
         </div> 
     </div>
     <div class="flex items-center justify-end">
         <button class="btn btn-primary text-white text-sm font-semibold py-2 !m-0 !w-fit" type="submit">Submit</button> 
     </div>
   </form>
</div>

<div>
  <form class="flex flex-col gap-4 !m-0">
     <div class="relative z-0 w-full mt-7 group">
         <input type="text" id="#floating_password" required='' class="block w-full px-0 text-xs bg-transparent border-0 border-b-2 appearance-none dark:border-b-2 text-content3 border-border-light peer"></input> 
         <label for="floating_password" class="absolute text-xs duration-300 transform -translate-y-9  text-content3 top-3 -z-10 peer-focus:font-medium dark:text-content3 origin-[0] peer-focus:left-0 rtl:peer-focus:left-unset rtl:peer-focus:right-0 peer-focus:text-primary peer-focus:dark:text-content3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-9">User Id</label> 
     </div>                                                    
     <div class="relative z-0 w-full mt-7 group">
         <input type="email" id="#floating_email" required='' class="block w-full px-0 text-xs bg-transparent border-0 border-b-2 appearance-none dark:border-b-2 text-content3 border-border-light peer"></input> 
         <label for="floating_email" class="absolute text-xs duration-300 transform -translate-y-9  text-content3 top-3 -z-10 peer-focus:font-medium dark:text-content3 origin-[0] peer-focus:left-0 rtl:peer-focus:left-unset rtl:peer-focus:right-0 peer-focus:text-primary peer-focus:dark:text-content3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-9">Email</label> 
     </div>
     <div class="flex items-center justify-end">
         <button class="btn btn-primary text-white text-sm font-semibold py-2 !m-0 !w-fit" type="submit">Submit</button> 
     </div>
   </form>
</div>

<div class="checkout-detail">
  <form class="flex flex-col gap-4 !m-0 theme-form" id="form-validation">
     <div>
         <label for="username">Name</label> 
         <input type="text" id="username" required='' placeholder='Enter your name'></input>
         <small>Error Message</small> 
     </div>
     <div>
         <label for="email">Email</label> 
         <input type="email" id="email" required='' placeholder='Enter email id></input> 
         <small>Error Message</small> 
     </div>
     <div>
         <label for="contact">Password</label> 
         <input type="number" id="contact1" required='' placeholder='Enter your contact></input> 
         <small>Error Message</small> 
     </div>
     <div class="flex items-center justify-end">
         <button class="btn btn-primary text-white text-xs font-semibold py-2 !m-0 !w-fit" type="submit">Submit</button> 
     </div>
   </form>
</div>

<div class="checkout-detail">
  <div class="flex mb-2 select-none validation-bar">
     <div class="w-full text-center step">
          <p class="mb-2 text-xs font-medium text-title">Name</p>
          <div class="bullet">
              <span>1</span>
          </div>
          <div class="check">
              <i  data-feather="check" class="w-4 h-4"></i>
          </div>
     </div>
     <div class="w-full text-center step">
          <p class="mb-2 text-xs font-medium text-title">Name</p>
          <div class="bullet">
              <span>2</span>
          </div>
          <div class="check">
              <i  data-feather="check" class="w-4 h-4"></i>
          </div>
     </div>
     <div class="w-full text-center step">
          <p class="mb-2 text-xs font-medium text-title">Name</p>
          <div class="bullet">
              <span>3</span>
          </div>
          <div class="check">
              <i  data-feather="check" class="w-4 h-4"></i>
          </div>
     </div>
   </div>
   <div class="w-full overflow-hidden form-outer">
      <form action='#' class="theme-form flex !m-0">
          <div class="flex flex-col gap-3 page slide-page">
              <h6 class="font-semibold text-title">Basic Info:</h6>
              <div>
                  <label for="firstName">First Name</label>
                  <input type="text" id="firstName" placeholder="Enter your first name" required>First Name</input>
              </div>
              <div>
                  <label for="lastName">Last Name</label>
                  <input type="text" id="lastName" placeholder="Enter your first name" required>First Name</input>
              </div>
              <div class="flex items-center justify-end">
                  <button class="text-xs btn btn-primary text-white py-2 firstNext next !w-fit !m-0">Next</button>
              </div>
          </div>
          <div class="flex flex-col gap-3 page">
              <h6 class="font-semibold text-title">Basic Info:</h6>
              <div>
                  <label for="email">Email</label>
                  <input type="email" id="email" placeholder="Enter your first name" required>First Name</input>
              </div>
              <div>
                  <label for="contact">Contact</label>
                  <input type="number" id="contact" placeholder="Enter your first name" required>First Name</input>
              </div>
              <div class="flex items-center justify-end">
                  <button class="text-xs btn btn-primary text-white py-2 prev-1 prev !w-fit !m-0">Previous</button>
                  <button class="text-xs btn btn-secondary text-white py-2 next-1 next !w-fit !m-0">Next</button>
              </div>
          </div>
          <div class="flex flex-col gap-3 page">
              <h6 class="font-semibold text-title">Basic Info:</h6>
              <div>
                  <label for="name">Username</label>
                  <input type="text" id="name" placeholder="Enter your first name" required>First Name</input>
              </div>
          <div class="relative">
              <input type="text" id="password2" placeholder='Enter your password' required=''></input> 
              <div class="password-icon">
                 <i data-feather="eye" class="feather-eye2 cursor-pointer w-4 h-4 stroke-title right-[25px] rtl:right-unset top-1/2 rtl:left-[25px] absolute -translate-y-1/2"> REMIND ME LATER </i>
                 <i data-feather="eye-off" class="feather-eye-off2 cursor-pointer w-4 h-4 stroke-title right-[25px] rtl:right-unset top-1/2 rtl:left-[25px] absolute -translate-y-1/2"> REMIND ME LATER </i>
              </div> 
          </div>
              <div class="flex items-center justify-end">
                  <button class="text-xs btn btn-primary text-white py-2 prev-2 prev !w-fit !m-0">Previous</button>
                  <button class="text-xs btn btn-primary text-white py-2 submit !w-fit !m-0">Submit</button>
              </div>
          </div>                                                    |       
      </form>
   </div>
</div>