پنجره‌های محاوره‌ای

<div x-data="{ modalIsOpen: true }">
    <!-- dialog trigger -->
    <button type="button" x-on:click="modalIsOpen = true"
        class="inline-flex items-center justify-center h-9 bg-surface-content border border-surface-content rounded-lg inset-shadow-xs inset-shadow-surface/20 font-semibold text-2xs text-surface cursor-pointer disabled:cursor-default disabled:opacity-70 hover:opacity-90 px-3">
        نمایش پنجره
    </button>

    <!-- modal -->
    <div x-cloak x-show="modalIsOpen" x-transition.opacity.duration.200ms x-on:keydown.esc.window="modalIsOpen = false"
        x-on:click.self="modalIsOpen = false"
        class="fixed inset-0 flex sm:items-center items-end justify-center bg-black/10 p-4 pb-8 lg:p-8 z-50">
        <!-- modal dialog -->
        <div x-show="modalIsOpen" x-transition:enter="transition ease-out duration-200 delay-100"
            x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0"
            class="flex flex-col w-full max-w-sm max-h-full bg-surface border rounded-xl shadow-md overflow-hidden">
            <!-- dialog header -->
            <div class="flex items-center relative sm:px-6 px-4 py-3.5">
                <h2 class="font-semibold text-lg">
                    عنوان پنجره
                </h2>

                <!-- dialog close button -->
                <button
                    class="inline-flex items-center justify-center absolute inset-e-5 size-7 border rounded-full text-surface-2-content cursor-pointer hover:text-destructive"
                    x-on:click="modalIsOpen = false">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                        <path
                            d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
                    </svg>
                </button>
            </div>
            <!-- end dialog header -->

            <!-- dialog body -->
            <div
                class="flex-1 grid gap-y-2.5 rounded-t-xl inset-shadow-xs inset-shadow-surface-content/5 overflow-y-auto sm:p-6 p-4">
                <p class="text-xs">
                    لطفاً پیش از ادامه، قوانین و خط‌مشی‌های زیر را مرور کنید:
                </p>

                <ol class="text-xs text-surface-2-content space-y-1">
                    <li>• استفاده مسئولانه از خدمات</li>
                    <li>• رعایت حقوق سایر کاربران</li>
                    <li>• پرهیز از محتوای غیرمجاز</li>
                </ol>

                <p class="text-xs text-surface-2-content mt-3">
                    با ادامه استفاده، موافقت خود را با این شرایط اعلام می‌کنید.
                </p>
            </div>
            <!-- end dialog body -->

            <!-- dialog footer -->
            <div class="flex items-center gap-x-1.5 justify-end sm:p-6 p-4">
                <button type="button" x-on:click="modalIsOpen = false"
                    class="inline-flex items-center justify-center h-9 bg-surface border rounded-lg inset-shadow-xs inset-shadow-surface-content/10 font-semibold text-2xs text-surface-2-content cursor-pointer disabled:cursor-default disabled:opacity-70 hover:text-surface-content px-3">
                    لغو
                </button>
                <button type="button" x-on:click="modalIsOpen = false"
                    class="inline-flex items-center justify-center h-9 bg-blue-500 border border-blue-500 rounded-lg inset-shadow-xs inset-shadow-white/50 font-semibold text-2xs text-white cursor-pointer disabled:cursor-default disabled:bg-blue-400 disabled:border-blue-400 hover:bg-blue-500/90 px-3">
                    می پذیرم
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                        class="size-3.5 ms-1">
                        <path fill-rule="evenodd"
                            d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
            <!-- end dialog footer -->
        </div>
        <!-- end modal dialog -->
    </div>
    <!-- end modal -->
</div>