<!-- The button to open modal -->
   <div class="flex flex-wrap gap-2">
       <label class="button-label btn-primary" for="modal-1">Default Modal</label>
   </div>

<!-- Put this part before </body> tag for default modal -->
   <div>
      <input class="peer" name="modal-1" type="checkbox" id="modal-1">
      <label class="modal-overlay peer-checked:block" for="modal-1"></label>
      <div class="modal peer-checked:block w-[300px] h-[auto]">
          <div class="modal-header">
              <h3>Congratulations !!</h3>
              <label class="modal-1">X</label>
          </div>
          <div class="modal-body h-[300px]">
              <p>You get the 3 months audible book subscription.</p>
          </div>
      </div>
   </div>

   <!-- The button to open modal -->
   <div class="flex flex-col flex-wrap gap-2">
       <label class="button-label btn-danger" for="modal-5">Footer Modal</label>
   </div>

<!-- Put this part before </body> tag for footer modal-->
    <div>
    <input class="peer" name="modal-5" type="checkbox" id="modal-5">
    <label class="modal-overlay peer-checked:block" for="modal-5"></label>
    <div class="modal w-[300px] h-[300px] peer-checked:block">
      <div class="modal-header">
        <h3>Cookies</h3>
        <label class="modal-5">X</label>
      </div>
      <div class="modal-body h-[150px]">
        <p>Accept the all cookies</p>
      </div>
      <div class="modal-footer">
        <label class="p-2 text-white btn btn-primary" for="modal-5">Accept</label>
      </div>
    </div>                    
  </div>

   <!-- The button to open modal -->
    <div class="flex flex-col flex-wrap gap-2">
        <label class="button-label btn-primary" for="modal-6">Centered Modal</label>
    </div>                        

<!-- Put this part before </body> tag for centered modal -->
  <div>                        
     <input class="peer" name="modal-6" type="checkbox" id="modal-6">
     <label class="modal-overlay peer-checked:block" for="modal-6"></label>
     <div class="modal modal-center peer-checked:block w-[300px]">
          <div class="modal-header">
              <h3>Terms and Conditions</h3>
              <label class="modal-6">X</label>
          </div>
          <div class="modal-body h-[180px]">
              <p>Accept the terms and condition fot further process</p>
          </div>
          <div class="modal-footer">
              <label class="p-2 text-white btn btn-primary" for="modal-6">Accept</label>
          </div>
     </div>
 </div> 

   <!-- The button to open modal -->
   <div class="flex flex-col flex-wrap gap-2">
       <label class="button-label btn-secondary" for="modal-2">Small Modal</label>
       <label class="button-label btn-success" for="modal-3">Large Modal</label>
       <label class="button-label btn-warning" for="modal-4">Extralarge Modal</label>
   </div>

<!-- Put this part before </body> tag for small size modal -->
  <div>
      <input class="peer" name="modal-2" type="checkbox" id="modal-2">                        
      <label class="modal-overlay peer-checked:block" for="modal-2"></label>
      <div class="modal peer-checked:block w-[250px]">
          <div class="modal-header">
              <h3>Congratulations !!</h3>
              <label class="modal-2">X</label>
          </div>
          <div class="modal-body h-[200px]">
              <p>You get the free tickets for dubai trip.</p>
          </div>
      </div>
  </div>

<!-- Put this part before </body> tag for large modal -->
  <div>
      <input type="checkbox" id="modal-3">                        
      <label class="modal-overlay peer-checked:block" for="modal-3"></label>
      <div class="modal peer-checked:block mzx-w-2xl">
          <div class="modal-header">
              <h3> Hurryy!!</h3>
              <label class="modal-3">X</label>
          </div>
          <div class="modal-body h-[200px]">
              lt;p>You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
          </div>
      </div>
  </div>

<!-- Put this part before </body> tag for extralarge modal -->
  <div>
      <input class="peer" name="modal-4" type="checkbox" id="modal-4">
      <label class="modal-overlay peer-checked:block" for="modal-4"></label>
      <div class="w-11/12 max-w-5xl modal peer-checked:block ">
          <div class="modal-header">
              <h3>congratulations !!</h3>
              <label class="modal-4">X</label>
          </div>
          <div class="modal-body h-[200px]">
              <p>You've been selected for a chance to get one year of subscription to use Wikipedia for free! and also get the one year of subscription for disney plus hotstar!</p>
          </div>
      </div>
  </div>

   <!-- The button to open modal -->
   <div class="flex flex-col flex-wrap gap-2">
       <label class="button-label btn-primary" for="modal-10">Top Left Modal</label>
       <label class="button-label btn-warning" for="modal-11">Top Center Modal</label>
       <label class="button-label btn-warning" for="modal-11">Top Right Modal</label>
   </div>                        

<!-- Put this part before </body> tag for top left position modal -->
   <div>                        
      <input class="peer" name="modal-10" type="checkbox" id="modal-10">
      <label class="modal-overlay peer-checked:block" for="modal-10"></label>
      <div class="modal modal-top-left peer-checked:block w-[300px]">
          <div class="modal-header">
              <h3>Terms and Conditions</h3>
              <label class="modal-10">X</label>
          </div>
          <div class="modal-body h-[180px]">
              <p>Accept the terms and condition fot further process</p>
          </div>
          <div class="modal-footer">
              <label class="p-2 text-white btn btn-primary" for="modal-10">Accept</label>
          </div>
      </div>
   </div> 

<!-- Put this part before </body> tag for top center position modal -->
  <div>                        
     <input class="peer" name="modal-11" type="checkbox" id="modal-11">
     <label class="modal-overlay peer-checked:block" for="modal-11"></label>
     <div class="modal modal-top-center peer-checked:block w-[300px]">
          <div class="modal-header">
              <h3>Terms and Conditions</h3>
              <label class="modal-11">X</label>
          </div>
          <div class="modal-body h-[182px]">
              <p>Accept the terms and condition fot further process</p>
          </div>
          <div class="modal-footer">
              <label class="p-2 text-white btn btn-primary" for="modal-11">Accept</label>
          </div>
      </div>
  </div>

<!-- Put this part before </body> tag for top right position modal -->
  <div>                        
     <input class="peer" name="modal-14" type="checkbox" id="modal-14">
     <label class="modal-overlay peer-checked:block" for="modal-14"></label>
     <div class="modal modal-top-right peer-checked:block w-[300px]">
          <div class="modal-header">
              <h3>Terms and Conditions</h3>
              <label class="modal-14">X</label>
          </div>
          <div class="modal-body h-[182px]">
              <p>Accept the terms and condition fot further process</p>
          </div>
          <div class="modal-footer">
              <label class="p-2 text-white btn btn-primary" for="modal-14">Accept</label>
          </div>
      </div>
  </div> 

 <!-- The button to open modal -->
   <div class="flex flex-col flex-wrap gap-2">
      <label class="button-label btn-info" for="modal-12">Bottom Left Modal</label>
      <label class="button-label btn-success" for="modal-13">Bottom Center Modal</label>
      <label class="button-label btn-success" for="modal-13">Bottom Right Modal</label>
   </div>                        

<!-- Put this part before </body> tag for bottom left position modal -->
  <div>                        
     <input class="peer" name="modal-12" type="checkbox" id="modal-12">
     <label class="modal-overlay peer-checked:block" for="modal-12"></label>
     <div class="modal modal-bottom-left peer-checked w-[300px]:block">
          <div class="modal-header">
              <h3>Terms and Conditions</h3>
              <label class="modal-12">X</label>
          </div>
          <div class="modal-body h-[180px]">
              <p>Accept the terms and condition fot further process</p>
          </div>
          <div class="modal-footer">
              <label class="p-2 text-white btn btn-primary" for="modal-12">Accept</label>
          </div>
      </div>
  </div> 

<!-- Put this part before </body> tag for bottom center position modal -->
  <div>                        
     <input class="peer" name="modal-13" type="checkbox" id="modal-13">
     <label class="modal-overlay peer-checked:block" for="modal-13"></label>
     <div class="modal modal-bottom-center peer-checked w-[300px]:block">
          <div class="modal-header">
              <h3>Terms and Conditions</h3>
              <label class="modal-13">X</label>
          </div>
          <div class="modal-body h-[180px]">
              <p>Accept the terms and condition fot further process</p>
          </div>
          <div class="modal-footer">
              <label class="p-2 text-white btn btn-primary" for="modal-13">Accept</label>
          </div>
      </div>
  </div>

<!-- Put this part before </body> tag for bottom right position modal -->
  <div>                        
     <input class="peer" name="modal-15" type="checkbox" id="modal-15">
     <label class="modal-overlay peer-checked:block" for="modal-15"></label>
     <div class="modal modal-bottom-right peer-checked w-[300px]:block">
         <div class="modal-header">
             <h3>Terms and Conditions</h3>
              <label class="modal-15">X</label>
         </div>
         <div class="modal-body h-[180px]">
              <p>Accept the terms and condition fot further process</p>
         </div>
         <div class="modal-footer">
              <label class="p-2 text-white btn btn-primary" for="modal-15">Accept</label>
         </div>
     </div>
  </div> 

  <!-- The button to open modal -->
  <div class="flex flex-col flex-wrap gap-2">
     <label class="button-label btn-info" for="modal-7" >Scrollable Modal</label>
  </div>

<!-- Put this part before </body> tag for scrollable modal-->
  <div>
      <input class="peer" name="modal-7" type="checkbox" id="modal-7">
      <label class="modal-overlay peer-checked:block" for="modal-7"></label>
      <div class="modal peer-checked:block w-[300px]">
          <div class="modal-header">
              <h3>Alert!!!</h3>
              <label class="modal-7">X</label>
          </div>
          <div class="modal-body modal-content-scroll h-[400px]">
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
              <p>Need to update</p>
          </div>
          <div class="modal-footer">
              <label class="p-2 text-white btn btn-primary" for="modal-7">Close</label>
          </div>
      </div>
  </div> 

  <!-- The button to open modal for tooltips & popover modal-->
  <div class="flex flex-col flex-wrap gap-2">
     <label class="button-label btn-danger" for="modal-9">Modal</label>
  </div>

<!-- Put this part before </body> tag -->
  <div>
      <input class="peer" name="modal-9" type="checkbox" id="modal-9">
      <label class="modal-overlay peer-checked:block" for="modal-9"></label>
      <div class="modal w-[300px]" peer-checked:block>
          <div class="modal-header">
              <h3>Modal Title</h3>
              <label class="modal-9">X</label>
          </div>
          <div class="modal-body">
              <p>Content for the modal</p>
          </div>
      </div>
  </div>