Nice responsive mobile-friendly modal window implementation with TailwindCSS and HeadlessUI (and some DaisyUI styles)

Modal.vue

<script lang="ts" setup>
import {
  Dialog as HDialog,
  DialogPanel as HDialogPanel,
  TransitionRoot as HTransitionRoot,
  TransitionChild as HTransitionChild,
} from "@headlessui/vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  static: { // no 'click outside' behaviour
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["close"]);
</script>

<template>
  <HTransitionRoot
    :show="show"
    as="template"
    enter="duration-300 ease-out"
    enter-from="opacity-0"
    enter-to="opacity-100"
    leave="duration-200 ease-in"
    leave-from="opacity-100"
    leave-to="opacity-0"
  >
    <HDialog
      @close="
        () => {
          if (!props.static) emits('close');
        }
      "
      class="fixed top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto grid place-items-end sm:place-items-center sm:inset-0 h-full bg-neutral/75 sm:backdrop-blur-sm"
    >
      <HTransitionChild
        enter="duration-300 ease-out"
        enter-from="translate-y-24 sm:opacity-0 sm:translate-y-0 sm:scale-95"
        enter-to="translate-y-0 sm:opacity-100 sm:scale-100"
        leave="duration-200 ease-in"
        leave-from="translate-y-0 sm:opacity-100 sm:scale-100"
        leave-to="translate-y-24 sm:opacity-0 sm:translate-y-0 sm:scale-95"
      >
        <HDialogPanel
          v-if="show"
          class="relative w-screen sm:w-full p-5 bg-base-200 sm:border border-base-content/60 rounded-t-lg sm:rounded-b-lg"
        >
          <header class="flex items-start justify-between pb-3">
            <span class="text-xl font-semibold">
              <slot name="header" />
            </span>
            <button class="btn btn-sm btn-ghost btn-circle ml-2" @click="emits('close')">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
              <span class="sr-only">Close modal</span>
            </button>
          </header>
          <hr class="border-b-1 border-base-content/60 pb-2" />
          <slot />
        </HDialogPanel>
      </HTransitionChild>
    </HDialog>
  </HTransitionRoot>
</template>