<div x-data="modal" class="relative flex justify-center">
  <button class="btn-primary" @click="toggle">Open Popover</button>
  <div @click.away="isOpen=false" x-show="isOpen" class="shadow-custom-1 absolute left-1/2 top-full z-10 w-full max-w-[314px] origin-top -translate-x-1/2 rounded-lg bg-neutral-0 p-4 duration-300 dark:bg-neutral-904 md:p-6">
    <p class="l-text mb-4">Etiam feugiat lorem non metus</p>
    <p class="s-text">Fusce vulputate eleifend sapien. Curabitur at lacus ac velit ornare lobortis.</p>
  </div>
</div>
                  

<div class="group relative mx-auto flex max-w-max justify-center">
  <button class="btn-primary-text">Hover with a Poppover</button>
  <div class="shadow-custom-1 invisible absolute left-1/2 top-full z-10 w-[314px] origin-top -translate-x-1/2 scale-0 rounded-lg bg-neutral-0 p-4 opacity-0 duration-300 group-hover:visible group-hover:scale-100 group-hover:opacity-100 dark:bg-neutral-904 md:p-6">
    <p class="l-text mb-4">Etiam feugiat lorem non metus</p>
    <p class="s-text">Fusce vulputate eleifend sapien. Curabitur at lacus ac velit ornare lobortis.</p>
  </div>
</div>