tailwindmodal.html

<!--
  Welcome to Tailwind Play, the official Tailwind CSS playground!

  https://play.tailwindcss.com/kcfjqo7FaC
-->
<div class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <!-- modal trigger -->
  <div>
    <label for="tw-modal" class="cursor-pointer rounded bg-black px-8 py-4 text-white active:bg-slate-400">OPEN MODAL</label>
  </div>

  <!-- hidden toggle -->
  <input type="checkbox" id="tw-modal" class="peer fixed appearance-none opacity-0" />
  <!-- modal -->
  <label for="tw-modal" class="pointer-events-none invisible fixed inset-0 flex cursor-pointer items-center justify-center overflow-hidden overscroll-contain bg-slate-700/30 opacity-0 transition-all duration-200 ease-in-out peer-checked:pointer-events-auto peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:translate-y-0 peer-checked:[&>*]:scale-100">
    <!-- modal-box -->
    <label class="max-h-[calc(100vh - 5em)] h-fit max-w-lg scale-90 overflow-y-auto overscroll-contain rounded-md bg-white p-6 text-black shadow-2xl transition" for="">
      <h3 class="text-lg font-bold">Modal opened!</h3>
      <p class="py-4">Deserunt pariatur nisi et sit nostrud sit cupidatat. Laborum excepteur proident minim magna aliqua exercitation anim in. Dolor excepteur tempor elit ullamco eiusmod magna Lorem ullamco in irure culpa reprehenderit duis excepteur aute. Culpa esse amet cillum eu non. Consectetur cupidatat ut commodo eiusmod sit eiusmod ex sint voluptate amet irure adipisicing ut est.</p>
    </label>
  </label>
</div>