Popover

<!-- Popover -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
  class="flex flex-col items-center justify-center gap-5 rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 px-4 py-44 dark:border-zinc-700 dark:bg-zinc-950/25"
>
  <!-- Popover container -->
  <div
    x-data="{
      open: false,

      // 'hover focus', 'click'
      trigger: 'hover focus',
    }"
    class="relative inline-block"
  >
    <button
      x-on:mouseenter="(trigger === 'hover focus') ? open = true : null"
      x-on:mouseleave="(trigger === 'hover focus') ? open = false : null"
      x-on:focus="(trigger === 'hover focus') ? open = true : null"
      x-on:blur="(trigger === 'hover focus') ? open = false : null"
      x-on:click="(trigger === 'click') ? open = !open : null"
      type="button"
      class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white open:border-zinc-700 open:bg-zinc-700 hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:open:border-zinc-700/50 dark:open:bg-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75"
    >
      <span>Hover me</span>
    </button>
    <div
      x-cloak
      x-show="open"
      x-transition:enter="transition ease-out duration-100"
      x-transition:enter-start="opacity-0 translate-y-2"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-75"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 -translate-y-10"
      class="absolute bottom-full start-1/2 z-10 -ms-28 flex w-56 origin-bottom flex-col items-center justify-center pb-0.5 will-change-transform"
    >
      <div
        class="overflow-hidden rounded-lg border border-zinc-200 bg-white text-start text-sm dark:border-zinc-700 dark:bg-zinc-800"
      >
        <h4
          class="border-b border-b-zinc-100 bg-zinc-50 px-3 py-2.5 font-medium dark:border-zinc-700/75 dark:bg-zinc-700/25"
        >
          Popover Title
        </h4>
        <p class="p-3 text-zinc-500 dark:text-zinc-400">
          This is the main content of the popover. You can put any extra info
          here.
        </p>
      </div>
      <div
        class="relative z-10 -mt-px h-0 w-0 flex-none border-e-8 border-s-8 border-t-8 border-e-transparent border-s-transparent border-t-white dark:border-t-zinc-800"
        aria-hidden="true"
      ></div>
      <div
        class="relative z-0 -mt-[7px] h-0 w-0 flex-none border-e-8 border-s-8 border-t-8 border-e-transparent border-s-transparent border-t-zinc-300 dark:border-t-zinc-600"
        aria-hidden="true"
      ></div>
    </div>
  </div>
  <!-- END Popover container -->
</div>
<!-- END Popover -->

<!-- Popover: On Click -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
  class="flex flex-col items-center justify-center gap-5 rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 px-4 py-56 dark:border-zinc-700 dark:bg-zinc-950/25"
>
  <!-- Popover container -->
  <div
    x-data="{
      open: false,

      // 'hover focus', 'click'
      trigger: 'click',
    }"
    class="relative inline-block"
  >
    <button
      x-on:mouseenter="(trigger === 'hover focus') ? open = true : null"
      x-on:mouseleave="(trigger === 'hover focus') ? open = false : null"
      x-on:focus="(trigger === 'hover focus') ? open = true : null"
      x-on:blur="(trigger === 'hover focus') ? open = false : null"
      x-on:click="(trigger === 'click') ? open = !open : null"
      type="button"
      class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white open:border-zinc-700 open:bg-zinc-700 hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:open:border-zinc-700/50 dark:open:bg-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75"
    >
      <span>Click me</span>
    </button>
    <div
      x-cloak
      x-show="open"
      x-transition:enter="transition ease-out duration-100"
      x-transition:enter-start="opacity-0 translate-y-2"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-75"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 -translate-y-10"
      class="absolute bottom-full start-1/2 z-10 -ms-32 flex w-64 origin-bottom flex-col items-center justify-center pb-0.5 will-change-transform"
    >
      <div
        class="overflow-hidden rounded-lg border border-zinc-200 bg-white text-start text-sm dark:border-zinc-700 dark:bg-zinc-800"
      >
        <div class="p-3 text-zinc-500 dark:text-zinc-400">
          <form class="space-y-2 dark:text-zinc-100" onsubmit="return false;">
            <div class="space-y-1">
              <label for="email" class="text-xs font-medium">Email</label>
              <input
                class="block w-full rounded-lg border border-zinc-200 px-2 py-1.5 text-sm/6 placeholder-zinc-500 focus:border-zinc-500 focus:ring focus:ring-zinc-500/50 dark:border-zinc-600 dark:bg-zinc-800 dark:placeholder-zinc-400 dark:focus:border-zinc-500"
                type="email"
                id="email"
                name="email"
                placeholder="Enter your email.."
              />
            </div>
            <div class="space-y-1">
              <label for="password" class="text-xs font-medium">Password</label>
              <input
                class="block w-full rounded-lg border border-zinc-200 px-2 py-1.5 text-sm/6 placeholder-zinc-500 focus:border-zinc-500 focus:ring focus:ring-zinc-500/50 dark:border-zinc-600 dark:bg-zinc-800 dark:placeholder-zinc-400 dark:focus:border-zinc-500"
                type="password"
                id="password"
                name="password"
                placeholder="Enter your password.."
              />
            </div>
            <button
              type="submit"
              class="flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-2 py-1.5 text-sm font-medium leading-5 text-white open:border-zinc-700 open:bg-zinc-700 hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:open:border-zinc-700/50 dark:open:bg-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75"
            >
              Login
            </button>
          </form>
        </div>
      </div>
      <div
        class="relative z-10 -mt-px h-0 w-0 flex-none border-e-8 border-s-8 border-t-8 border-e-transparent border-s-transparent border-t-white dark:border-t-zinc-800"
        aria-hidden="true"
      ></div>
      <div
        class="relative z-0 -mt-[7px] h-0 w-0 flex-none border-e-8 border-s-8 border-t-8 border-e-transparent border-s-transparent border-t-zinc-300 dark:border-t-zinc-600"
        aria-hidden="true"
      ></div>
    </div>
  </div>
  <!-- END Popover container -->
</div>
<!-- END Popover: On Click -->