<!--requires alpine.js -->
<div x-data="{'show':false}">
  <!--Button for triggering modal-->
   <div class="flex flex-col">
     <div>
        <button @click.prevent="show = true" class="btn-light btn-sm">
          Show Modal
        </button>
     <div>
    </div>
 <!--Button for triggering modal-->
  <div>
    <template x-teleport="body">
      <div x-show="show" @keydown.escape.prevent.stop="show= false"
        role="dialog" aria-modal="true" x-id="['modal-title']" :aria-labelledby="$id('modal-title')"
        class="fixed inset-0 z-90">
     
        <div x-show="show" x-transition.opacity class="fixed inset-0 bg-black bg-opacity-50"></div>
        <!-- Modal Panel -->
        <div x-show="show" x-transition @click="show= false"
          class="relative h-full w-full flex items-center justify-center">

          <div @click.stop x-trap.noscroll.inert="show"
            class="inline-block align-bottom w-full bg-white 
            dark:bg-gray-700 rounded-lg text-left relative
            overflow-hidden shadow-xl bg-white border overflow-y-auto 
            max-w-md">
           
          <!--Close button -->
           <div class="absolute top-4 right-4 text-gray-600" 
           @click="show=false">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0
               000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293
                1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0
                 001.414-1.414L11.414 10l1.293-1.293a1 1 0
                  00-1.414-1.414L10 8.586 8.707 7.293z" 
                  clip-rule="evenodd" /></svg>
          <!-- Modal content -->      
             
          </div>
             <div class='flex flex-col h-64 min-h-64 p-4'>
             
               <h2 'class='text-2xl text-gray-600 font-semibold'>
               Modal Title
               </h2>
               
               <p class='mt-5'>
                 Lorem ipsum dolor sit amet, consectetur adipiscing 
                 elit, sed do eiusmod tempor incididunt ut labore 
                 et dolore magna aliqua. 
                </p>
             </div>
   
              <div class="form-buttons">
                <button class="btn btn-xs mx-2" type="submit">
                 Save
                </button>
                <button class="btn-light btn-xs mx-2 " @click="show= false">
                  Cancel
                </button>
              </div>
            
          </div>
        </div>
      </div>
    </template>
  </div>
</div>