Modal

<div x-data="{ open: false, title: 'Hello modal' }">
  
  <button @click="open = ! open ; title='Alpine Rocks!'">Open</button>
  
  {# modal #}
  <div
    x-show="open"
    @click.outside="open = false"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform scale-90"
    x-transition:enter-end="opacity-100 transform scale-100"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100 transform scale-100"
    x-transition:leave-end="opacity-0 transform scale-90"

    class="
    absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 
    w-1/2 h-1/2
    bg-gray-500 rounded-lg shadow-lg p-4">
    
      <p x-text="title" class="text-red-500 text-5xl"></p>
    
    <button @click="open = ! open" class="text-white">close</button>
  </div>

</div>

{# should be done more elegant ... #}
<div x-data="{ open: false, title: 'Hello modal' }">
  
  <button @click="open = ! open ; title='tailwind is kinda ok as well'">Open</button>
  
  {# modal #}
  <div
    x-show="open"
    @click.outside="open = false"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 transform scale-90"
    x-transition:enter-end="opacity-100 transform scale-100"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100 transform scale-100"
    x-transition:leave-end="opacity-0 transform scale-90"

    class="
    absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 
    w-1/2 h-1/2
    bg-gray-500 rounded-lg shadow-lg p-4">
    
      <p x-text="title" class="text-red-500 text-5xl"></p>
    
    <button @click="open = ! open" class="text-white">close</button>
  </div>

</div>