• HTML

HTML

<!-- modal div -->
    <div class="mt-6" x-data="{ open: false }">

      <!-- Button (blue), duh! -->
      <button class="px-4 py-2 text-white bg-blue-500 rounded select-none no-outline focus:shadow-outline" @click="open = true">Open Modal</button>

      <!-- Dialog (full screen) -->
      <div class="absolute top-0 left-0 flex items-center justify-center w-full h-full" style="background-color: rgba(0,0,0,.5);" x-show="open"  >

        <!-- A basic modal dialog with title, body and one button to close -->
        <div class="h-auto p-4 mx-2 text-left bg-white rounded shadow-xl md:max-w-xl md:p-6 lg:p-8 md:mx-0" @click.away="open = false">
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg font-medium leading-6 text-gray-900">
              Modal Title
            </h3>

            <div class="mt-2">
              <p class="text-sm leading-5 text-gray-500">
                Adipisci quasi doloribus. Veniam veritatis dignissimos. Quis maiores ea. Et nulla sunt.
              </p>
          </div>
        </div>

          <!-- One big close button.  --->
          <div class="mt-5 sm:mt-6">
            <span class="flex w-full rounded-md shadow-sm">
              <button @click="open = false" class="inline-flex justify-center w-full px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-700">
                Close this modal!
              </button>
            </span>
          </div>

        </div>
      </div>
    </div>
    
<!-- 

fuente:
    
    https://dev.to/andypeters/creating-a-modal-dialog-in-tailwindcss-and-alpinejs-bc5 

Estracto:
    Recientemente, convertí una aplicación en la que estoy trabajando de 
    un tema Bootstrap 4 a Tailwind CSS y Alpine.js. Durante ese proceso, 
    no fue inmediatamente obvio (para mí) cómo abrir un cuadro de diálogo 
    de ventana modal de pantalla completa haciendo clic en un botón; 
    y ciérralo de nuevo. En ese momento no llegué muy lejos buscando 
    en Google, Dev.to o GitHub. Después de averiguarlo, pensé que 
    merecía una breve redacción. Supongo que está todo configurado 
    con TailwindCSS o AlpineJS; Aquí vamos...
    
-->