Dexo - Premium Admin Template

Modal

You can use modal component to show interactive dialogs and notifications.

Default Modal

  <!-- 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 audable book subscription.</p>
          </div>
      </div>
   </div>

Sizes

You can use different size of modal to show more informations.

Small Modal Large Modal Extralarge Modal

  <!-- 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="modal peer-checked:block max-w-7xl">
          <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>

With footer

You can add footer in modal to create the modal-footer.

Footer Modal

  <!-- 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="btn btn-primary p-2 text-white" for="modal-5">Accept</label>
      </div>
    </div>                    
  </div>

Centered Position

You can set centered position using .modal-center class.

Centered Modal

  <!-- 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="btn btn-primary p-2 text-white" for="modal-6">Accept</label>
          </div>
     </div>
 </div>

Top Positons

You can set position top-left top-center & top-right using .modal-top-left, .modal-top-center & .modal-top-right class.

Top Left Modal Top Center Modal Top Right Modal

  <!-- 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="btn btn-primary p-2 text-white" 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="btn btn-primary p-2 text-white" 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="btn btn-primary p-2 text-white" for="modal-14">Accept</label>
          </div>
      </div>
  </div>

Bottom Positions

You can set position bottom-left bottom-center & bottom-right using .modal-bottom-left, modal-bottom-center & .modal-bottom-right class.

Bottom Left Modal Bottom Center Modal Bottom Right Modal

  <!-- 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="btn btn-primary p-2 text-white" 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="btn btn-primary p-2 text-white" 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="btn btn-primary p-2 text-white" for="modal-15">Accept</label>
         </div>
     </div>
  </div>

Scrollable

You can set the scrollable modal.

Scrollable Modal

  <!-- 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="btn btn-primary text-white p-2" for="modal-7">Close</label>
          </div>
      </div>
  </div>

Form Element

You can set the form inside the modal content.

 <!-- The button to open modal -->
  <div class="flex flex-col flex-wrap gap-2>
     <label class="button-label btn-warning" for="modal-8">Login Form</label>
  </div>

<!-- Put this part before </body> tag for form modal-->
  <div>
      <input class="peer" name="modal-8" type="checkbox" id="modal-8">
      <label class="modal-overlay peer-checked:block" for="modal-8"></label>
      <div class="modal peer-checked:block max-w-sm">
          <div class="modal-body">
              <form class="theme-form flex flex-col gap-3">
                  <h3>Log in to account</h3>
                  <p>Hello, enter your email id and password for log in to your account</p>
                  <div> <input type="email" placeholder="Enter your id.." required> </div>
                  <div> <input type="password" placeholder="password.." required> </div>
                  <div class="flex justify-between items-center gap-1"> 
                      <div class="flex items-center gap-2 !mb-0"> 
                          <input type="checkbox" id="checkbox-1">
                          <label for=checkbox-1 class="!text-light !text-xs"> Remember me </label>
                      </div>
                      <div class="!mb-0"><a href="javascript:void(0)"> Forgot password? </a> </div>
                  </div>
                  <div> <h4> Or Sign in with </h4> </div>
                  <div class="social">
                      <a href="javascript:void(0)" class="btn flex gap-1 justify-center items-center> 
                          <img src="../../image.svg" alt="linkdin"/> Linkedin </a>
                      <a href="javascript:void(0)" class="btn flex gap-1 justify-center items-center> 
                          <img src="../../image.svg" alt="twitter"/> Twitter </a>
                      <a href="javascript:void(0)" class="btn flex gap-1 justify-center items-center> 
                          <img src="../../image.svg" alt="facebook"/> Facebook </a>
                  </div>
                  <div class="text-center"> 
                      <span> Don't have an account? <small> Create Now </small> </span> 
                  </div>
              </form>
          </div>
      </div> 
  </div>

Tooltip & Popover

You can set tooltip inside the popover.

Tooltip & Popover

  <!-- 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>

Hand crafted & made with

Modal

Modal

Sizes

With footer

Centered Position

Top Positons

Bottom Positions

Scrollable

Form Element

Tooltip & Popover

Template Mode

Layout Type

Sidebar Type

Notification

Dmitriy Groshev

Sufiya Elija

Janis Evans

Mukrani Pabelo

Josephin Water

Janis Evans

Sufiya Elija

Notification

New Review Receive

Transaction $250 Success

Order Place Success

Netflix Subscription Expires

Congratulations You Won $2500

Latest Updates On You Phone

Cart Items (25)

Flower Pot

Iphone Max pro

Royal Party Glass

Water Proof Watch

Traveling Duffle Bag

Add Total

Helen Walter

Modal

Modal

Sizes

With footer

Centered Position

Top Positons

Bottom Positions

Scrollable

Form Element

Tooltip & Popover

Template Mode

Layout Type

Sidebar Type

Congratulations !!

Congratulations !!

Hurryy!!

congratulations !!

Cookies

Terms and Conditions

Alert!!!

Log in to account

Or Sign in with

Modal Title

Terms and Conditions

Terms and Conditions

Terms and Conditions

Terms and Conditions

Terms and Conditions

Terms and Conditions