Modal

Example

                
                  <div x-data="{ show: false }">
                    <!-- Button trigger modal -->
                    <button @click="show = true" type="button" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Launch Modal</Button>

                    <!-- Modal -->
                    <div x-show="show" tabindex="0" class="z-50 overflow-auto inset-0 w-full h-full fixed py-6">
                      <div @click.away="show = false" class="z-50 relative p-3 mx-auto my-0 max-w-full" style="min-width: 500px;" x-show="show" x-transition:enter="transition duration-500" x-transition:enter-start="transform opacity-0 -translate-y-4" x-transition:enter-end="transform opacity-100 translate-y-0" x-transition:leave="transition -translate-y-4" x-transition:leave-start="transform opacity-100 translate-y-0" x-transition:leave-end="transform opacity-0 -translate-y-4">
                        <div class="bg-white dark:bg-gray-800 rounded shadow-lg border dark:border-gray-700 flex flex-col overflow-hidden">
                          <button @click="show = false" class="fill-current h-6 w-6 absolute ltr:right-0 rtl:left-0 top-0 m-6 font-3xl font-bold">×</button>
                          <!-- modal title -->
                          <div class="px-6 py-3 text-xl border-b font-bold text-gray-800 dark:text-gray-100 dark:border-gray-700">Title of the modal</div>
                          <!-- modal content -->
                          <div class="p-6 flex-grow">
                            <p class="text-gray-500">Woohoo, you're reading this text in a modal!</p>
                          </div>
                          <div class="px-6 py-3 border-t dark:border-gray-700 flex justify-end">
                            <button @click="show = false" type="button" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2">Close</Button>
                            <button type="button" class="py-3 px-5 inline-block text-center rounded-md leading-normal text-gray-100 bg-blue-700 border border-blue-700 hover:text-white hover:bg-blue-800 hover:ring-0 hover:border-blue-800 focus:bg-blue-800 focus:border-blue-800 focus:outline-none focus:ring-0">Saves Changes</Button>
                          </div>
                        </div>
                      </div>
                      <div class="z-40 overflow-auto left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-black opacity-50"></div>
                    </div>
                    </div>