Drawer

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

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

Manually Close

Just move label.drawer-background to div.drawer-background.

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

Left Drawer

<div class="drawer drawer-left">{/* ... */}</div>