Modal

<label class="btn" for="modal" tabIndex={0}>Click</label>
<input id="modal" hidden type="checkbox" />
<div class="modal">
  <label class="modal-background" for="modal" tabIndex={0} />
  <div class="modal-content">
    <h2 class="text-2xl font-bold">Modal Title</h2>
    <p class="py-2">Are you sure?</p>
  </div>
</div>

Note: .modal can be activated by &.checked, &.active or :checked + &.

Manually Close

<label class="btn" for="modal" tabIndex={0}>Click</label>
<input id="modal" hidden type="checkbox" />
<div class="modal">
  <div class="modal-background" for="modal" />
  <div class="modal-content">
    <h2 class="text-2xl font-bold">Modal Title</h2>
    <p class="py-2">Are you sure?</p>
    <p class="flex justify-end">
      <label for="modal" class="btn" tabIndex={0}>
        Yes
      </label>
    </p>
  </div>
</div>