<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Components</a>
            </li>
            <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
                <span>Modals</span>
            </li>
        </ul>

        <div class="pt-5 space-y-8">
            <div class="panel p-3 flex items-center text-primary overflow-x-auto whitespace-nowrap">
                <div class="ring-2 ring-primary/30 rounded-full bg-primary text-white p-1.5 ltr:mr-3 rtl:ml-3">
                    <icon-bell />
                </div>
                <span class="ltr:mr-3 rtl:ml-3">Documentation: </span
                ><a href="https://headlessui.com/vue/dialog" target="_blank" class="block hover:underline">https://headlessui.com/vue/dialog</a>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- basic -->
                <div class="panel">
                    <div class="flex items-center justify-between mb-5">
                        <h5 class="font-semibold text-lg dark:text-white-light">Basic</h5>
                        <a
                            class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600"
                            href="javascript:;"
                            @click="toggleCode('code1')"
                        >
                            <span class="flex items-center">
                                <icon-code class="me-2" />
                                Code
                            </span>
                        </a>
                    </div>

                    <div class="mb-5">
                        <!-- Trigger -->
                        <div class="flex items-center justify-center">
                            <button type="button" class="btn btn-primary" @click="modal1 = true">Launch modal</button>
                        </div>

                        <!-- Modal -->
                        <TransitionRoot appear :show="modal1" as="template">
                            <Dialog as="div" @close="modal1 = false" class="relative z-[51]">
                                <TransitionChild
                                    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"
                                >
                                    <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                </TransitionChild>

                                <div class="fixed inset-0 overflow-y-auto">
                                    <div class="flex min-h-full items-start justify-center px-4 py-8">
                                        <TransitionChild
                                            as="template"
                                            enter="duration-300 ease-out"
                                            enter-from="opacity-0 scale-95"
                                            enter-to="opacity-100 scale-100"
                                            leave="duration-200 ease-in"
                                            leave-from="opacity-100 scale-100"
                                            leave-to="opacity-0 scale-95"
                                        >
                                            <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
                                                <button
                                                    type="button"
                                                    class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                    @click="modal1 = false"
                                                >
                                                    <icon-x />
                                                </button>
                                                <div
                                                    class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                >
                                                    Modal Title
                                                </div>
                                                <div class="p-5">
                                                    <p>
                                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed
                                                        luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                        Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                    </p>

                                                    <div class="flex justify-end items-center mt-8">
                                                        <button type="button" @click="modal1 = false" class="btn btn-outline-danger">Discard</button>
                                                        <button type="button" @click="modal1 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
                                                    </div>
                                                </div>
                                            </DialogPanel>
                                        </TransitionChild>
                                    </div>
                                </div>
                            </Dialog>
                        </TransitionRoot>
                    </div>

                    <template v-if="codeArr.includes('code1')">
                        <highlight>
                            <pre>
&lt;!-- basic --&gt;
&lt;div class=&quot;mb-5&quot;&gt;
  &lt;!-- Trigger --&gt;
  &lt;div class=&quot;flex items-center justify-center&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; @click=&quot;modal1 = true&quot;&gt;Launch modal&lt;/button&gt;
  &lt;/div&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal1&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal1 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild as=&quot;template&quot; enter=&quot;duration-300 ease-out&quot; enter-from=&quot;opacity-0&quot; enter-to=&quot;opacity-100&quot; leave=&quot;duration-200 ease-in&quot; leave-from=&quot;opacity-100&quot; leave-to=&quot;opacity-0&quot;&gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal1 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;p&gt;
                  Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes,
                  nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                &lt;/p&gt;

                &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal1 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal1 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- script --&gt;
&lt;script lang=&quot;ts&quot; setup&gt;
import { ref } from 'vue';
import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
const modal1 = ref(false);
&lt;/script&gt;
</pre
                            >
                        </highlight>
                    </template>
                </div>

                <!-- Vertically Centered -->
                <div class="panel">
                    <div class="flex items-center justify-between mb-5">
                        <h5 class="font-semibold text-lg dark:text-white-light">Vertically Centered</h5>
                        <a
                            class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600"
                            href="javascript:;"
                            @click="toggleCode('code2')"
                        >
                            <span class="flex items-center">
                                <icon-code class="me-2" />
                                Code
                            </span>
                        </a>
                    </div>
                    <div class="mb-5">
                        <!-- Trigger -->
                        <div class="flex items-center justify-center">
                            <button type="button" class="btn btn-info" @click="modal2 = true">Launch modal</button>
                        </div>

                        <!-- Modal -->
                        <TransitionRoot appear :show="modal2" as="template">
                            <Dialog as="div" @close="modal2 = false" class="relative z-[51]">
                                <TransitionChild
                                    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"
                                >
                                    <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                </TransitionChild>

                                <div class="fixed inset-0 overflow-y-auto">
                                    <div class="flex min-h-full items-center justify-center px-4 py-8">
                                        <TransitionChild
                                            as="template"
                                            enter="duration-300 ease-out"
                                            enter-from="opacity-0 scale-95"
                                            enter-to="opacity-100 scale-100"
                                            leave="duration-200 ease-in"
                                            leave-from="opacity-100 scale-100"
                                            leave-to="opacity-0 scale-95"
                                        >
                                            <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
                                                <button
                                                    type="button"
                                                    class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                    @click="modal2 = false"
                                                >
                                                    <icon-x />
                                                </button>
                                                <div
                                                    class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                >
                                                    Modal Title
                                                </div>
                                                <div class="p-5">
                                                    <p>
                                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed
                                                        luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                        Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                    </p>

                                                    <div class="flex justify-end items-center mt-8">
                                                        <button type="button" @click="modal2 = false" class="btn btn-outline-danger">Discard</button>
                                                        <button type="button" @click="modal2 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
                                                    </div>
                                                </div>
                                            </DialogPanel>
                                        </TransitionChild>
                                    </div>
                                </div>
                            </Dialog>
                        </TransitionRoot>
                    </div>
                    <template v-if="codeArr.includes('code2')">
                        <highlight>
                            <pre>
&lt;!-- vertically centered --&gt;
&lt;div class=&quot;mb-5&quot;&gt;
  &lt;!-- Trigger --&gt;
  &lt;div class=&quot;flex items-center justify-center&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; @click=&quot;modal2 = true&quot;&gt;Launch modal&lt;/button&gt;
  &lt;/div&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal2&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal2 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild as=&quot;template&quot; enter=&quot;duration-300 ease-out&quot; enter-from=&quot;opacity-0&quot; enter-to=&quot;opacity-100&quot; leave=&quot;duration-200 ease-in&quot; leave-from=&quot;opacity-100&quot; leave-to=&quot;opacity-0&quot;&gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-center justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal2 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;p&gt;
                  Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes,
                  nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                &lt;/p&gt;

                &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal2 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal2 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- script --&gt;
&lt;script lang=&quot;ts&quot; setup&gt;
import { ref } from 'vue';
import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
const modal2 = ref(false);
&lt;/script&gt;
</pre
                            >
                        </highlight>
                    </template>
                </div>

                <!-- static -->
                <div class="panel">
                    <div class="flex items-center justify-between mb-5">
                        <h5 class="font-semibold text-lg dark:text-white-light">Static</h5>
                        <a
                            class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600"
                            href="javascript:;"
                            @click="toggleCode('code3')"
                        >
                            <span class="flex items-center">
                                <icon-code class="me-2" />
                                Code
                            </span>
                        </a>
                    </div>
                    <div class="mb-5">
                        <!-- Trigger -->
                        <div class="flex items-center justify-center">
                            <button type="button" class="btn btn-secondary" @click="modal3 = true">Static modal</button>
                        </div>

                        <!-- Modal -->
                        <TransitionRoot appear :show="modal3" as="template">
                            <Dialog as="div" class="relative z-[51]">
                                <TransitionChild
                                    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"
                                >
                                    <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                </TransitionChild>

                                <div class="fixed inset-0 overflow-y-auto">
                                    <div class="flex min-h-full items-start justify-center px-4 py-8">
                                        <TransitionChild
                                            as="template"
                                            enter="duration-300 ease-out"
                                            enter-from="opacity-0 scale-95"
                                            enter-to="opacity-100 scale-100"
                                            leave="duration-200 ease-in"
                                            leave-from="opacity-100 scale-100"
                                            leave-to="opacity-0 scale-95"
                                        >
                                            <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
                                                <button
                                                    type="button"
                                                    class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                    @click="modal3 = false"
                                                >
                                                    <icon-x />
                                                </button>
                                                <div
                                                    class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                >
                                                    Modal Title
                                                </div>
                                                <div class="p-5">
                                                    <p>
                                                        Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed
                                                        luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                        Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                    </p>

                                                    <div class="flex justify-end items-center mt-8">
                                                        <button type="button" @click="modal3 = false" class="btn btn-outline-danger">Discard</button>
                                                        <button type="button" @click="modal3 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
                                                    </div>
                                                </div>
                                            </DialogPanel>
                                        </TransitionChild>
                                    </div>
                                </div>
                            </Dialog>
                        </TransitionRoot>
                    </div>
                    <template v-if="codeArr.includes('code3')">
                        <highlight>
                            <pre>
&lt;!-- static --&gt;
&lt;div class=&quot;mb-5&quot;&gt;
  &lt;!-- Trigger --&gt;
  &lt;div class=&quot;flex items-center justify-center&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; @click=&quot;modal3 = true&quot;&gt;Static modal&lt;/button&gt;
  &lt;/div&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal3&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild as=&quot;template&quot; enter=&quot;duration-300 ease-out&quot; enter-from=&quot;opacity-0&quot; enter-to=&quot;opacity-100&quot; leave=&quot;duration-200 ease-in&quot; leave-from=&quot;opacity-100&quot; leave-to=&quot;opacity-0&quot;&gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal3 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;p&gt;
                  Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes,
                  nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                &lt;/p&gt;

                &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal3 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal3 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- script --&gt;
&lt;script lang=&quot;ts&quot; setup&gt;
import { ref } from 'vue';
import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
const modal3 = ref(false);
&lt;/script&gt;
</pre
                            >
                        </highlight>
                    </template>
                </div>

                <!-- Remove animation -->
                <div class="panel">
                    <div class="flex items-center justify-between mb-5">
                        <h5 class="font-semibold text-lg dark:text-white-light">Remove animation</h5>
                        <a
                            class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600"
                            href="javascript:;"
                            @click="toggleCode('code4')"
                        >
                            <span class="flex items-center">
                                <icon-code class="me-2" />
                                Code
                            </span>
                        </a>
                    </div>
                    <div class="mb-5">
                        <!-- Trigger -->
                        <div class="flex items-center justify-center">
                            <button type="button" class="btn btn-success" @click="modal4 = true">Launch modal</button>
                        </div>

                        <!-- Modal -->
                        <Dialog as="div" :open="modal4" @close="modal4 = false" class="relative z-[51]">
                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />

                            <div class="fixed inset-0 overflow-y-auto">
                                <div class="flex min-h-full items-start justify-center px-4 py-8">
                                    <DialogPanel class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark">
                                        <button
                                            type="button"
                                            class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                            @click="modal4 = false"
                                        >
                                            <icon-x />
                                        </button>
                                        <div class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]">
                                            Modal Title
                                        </div>
                                        <div class="p-5">
                                            <p>
                                                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus.
                                                Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti.
                                                Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                            </p>

                                            <div class="flex justify-end items-center mt-8">
                                                <button type="button" @click="modal4 = false" class="btn btn-outline-danger">Discard</button>
                                                <button type="button" @click="modal4 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">Save</button>
                                            </div>
                                        </div>
                                    </DialogPanel>
                                </div>
                            </div>
                        </Dialog>
                    </div>
                    <template v-if="codeArr.includes('code4')">
                        <highlight>
                            <pre>
&lt;!-- remove animation --&gt;
&lt;div class=&quot;mb-5&quot;&gt;
  &lt;!-- Trigger --&gt;
  &lt;div class=&quot;flex items-center justify-center&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; @click=&quot;modal4 = true&quot;&gt;Launch modal&lt;/button&gt;
  &lt;/div&gt;

  &lt;!-- Modal --&gt;
  &lt;Dialog as=&quot;div&quot; :open=&quot;modal4&quot; @close=&quot;modal4 = false&quot; class=&quot;relative z-50&quot;&gt;
    &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;

    &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
      &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
        &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal4 = false&quot;&gt;
            &lt;svg&gt; ... &lt;/svg&gt;
          &lt;/button&gt;
          &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
          &lt;div class=&quot;p-5&quot;&gt;
            &lt;p&gt;
              Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes,
              nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
            &lt;/p&gt;

            &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
              &lt;button type=&quot;button&quot; @click=&quot;modal4 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
              &lt;button type=&quot;button&quot; @click=&quot;modal4 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/DialogPanel&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/Dialog&gt;
&lt;/div&gt;

&lt;!-- script --&gt;
&lt;script lang=&quot;ts&quot; setup&gt;
import { ref } from 'vue';
import { Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
const modal4 = ref(false);
&lt;/script&gt;
</pre
                            >
                        </highlight>
                    </template>
                </div>

                <!-- Optional sizes -->
                <div class="panel">
                    <div class="flex items-center justify-between mb-5">
                        <h5 class="font-semibold text-lg dark:text-white-light">Optional sizes</h5>
                        <a
                            class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600"
                            href="javascript:;"
                            @click="toggleCode('code5')"
                        >
                            <span class="flex items-center">
                                <icon-code class="me-2" />
                                Code
                            </span>
                        </a>
                    </div>
                    <div class="mb-5">
                        <div class="flex items-center justify-center gap-2">
                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-warning" @click="modal5 = true">Extra large</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal5" as="template">
                                    <Dialog as="div" @close="modal5 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <TransitionChild
                                                    as="template"
                                                    enter="duration-300 ease-out"
                                                    enter-from="opacity-0 scale-95"
                                                    enter-to="opacity-100 scale-100"
                                                    leave="duration-200 ease-in"
                                                    leave-from="opacity-100 scale-100"
                                                    leave-to="opacity-0 scale-95"
                                                >
                                                    <DialogPanel
                                                        class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-5xl text-black dark:text-white-dark"
                                                    >
                                                        <button
                                                            type="button"
                                                            class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                            @click="modal5 = false"
                                                        >
                                                            <icon-x />
                                                        </button>
                                                        <div
                                                            class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                        >
                                                            Modal Title
                                                        </div>
                                                        <div class="p-5">
                                                            <p>
                                                                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet
                                                                velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                                                                ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet
                                                                ullamcorper mi.
                                                            </p>

                                                            <div class="flex justify-end items-center mt-8">
                                                                <button type="button" @click="modal5 = false" class="btn btn-outline-danger">Discard</button>
                                                                <button type="button" @click="modal5 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                    Save
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </DialogPanel>
                                                </TransitionChild>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-danger" @click="modal6 = true">Large</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal6" as="template">
                                    <Dialog as="div" @close="modal6 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <TransitionChild
                                                    as="template"
                                                    enter="duration-300 ease-out"
                                                    enter-from="opacity-0 scale-95"
                                                    enter-to="opacity-100 scale-100"
                                                    leave="duration-200 ease-in"
                                                    leave-from="opacity-100 scale-100"
                                                    leave-to="opacity-0 scale-95"
                                                >
                                                    <DialogPanel
                                                        class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-xl text-black dark:text-white-dark"
                                                    >
                                                        <button
                                                            type="button"
                                                            class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                            @click="modal6 = false"
                                                        >
                                                            <icon-x />
                                                        </button>
                                                        <div
                                                            class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                        >
                                                            Modal Title
                                                        </div>
                                                        <div class="p-5">
                                                            <p>
                                                                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet
                                                                velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                                                                ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet
                                                                ullamcorper mi.
                                                            </p>

                                                            <div class="flex justify-end items-center mt-8">
                                                                <button type="button" @click="modal6 = false" class="btn btn-outline-danger">Discard</button>
                                                                <button type="button" @click="modal6 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                    Save
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </DialogPanel>
                                                </TransitionChild>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-secondary" @click="modal7 = true">Small</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal7" as="template">
                                    <Dialog as="div" @close="modal7 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <TransitionChild
                                                    as="template"
                                                    enter="duration-300 ease-out"
                                                    enter-from="opacity-0 scale-95"
                                                    enter-to="opacity-100 scale-100"
                                                    leave="duration-200 ease-in"
                                                    leave-from="opacity-100 scale-100"
                                                    leave-to="opacity-0 scale-95"
                                                >
                                                    <DialogPanel
                                                        class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark"
                                                    >
                                                        <button
                                                            type="button"
                                                            class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                            @click="modal7 = false"
                                                        >
                                                            <icon-x />
                                                        </button>
                                                        <div
                                                            class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                        >
                                                            Modal Title
                                                        </div>
                                                        <div class="p-5">
                                                            <p>
                                                                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet
                                                                velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
                                                                ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet
                                                                ullamcorper mi.
                                                            </p>

                                                            <div class="flex justify-end items-center mt-8">
                                                                <button type="button" @click="modal7 = false" class="btn btn-outline-danger">Discard</button>
                                                                <button type="button" @click="modal7 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                    Save
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </DialogPanel>
                                                </TransitionChild>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>
                        </div>
                    </div>
                    <template v-if="codeArr.includes('code5')">
                        <highlight>
                            <pre>
&lt;!-- extra large --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot; @click=&quot;modal5 = true&quot;&gt;Extra large&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal5&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal5 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-5xl text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal5 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;p&gt;
                  Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                  montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                &lt;/p&gt;

                &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal5 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal5 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- large --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; @click=&quot;modal6 = true&quot;&gt;Large&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal6&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal6 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-xl text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal6 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;p&gt;
                  Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                  montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                &lt;/p&gt;

                &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal6 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal6 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- small --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; @click=&quot;modal7 = true&quot;&gt;Small&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal7&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal7 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal7 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;p&gt;
                  Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                  montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                &lt;/p&gt;

                &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal7 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal7 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- script --&gt;
&lt;script lang=&quot;ts&quot; setup&gt;
import { ref } from 'vue';
import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
const modal5 = ref(false);
const modal6 = ref(false);
const modal7 = ref(false);
&lt;/script&gt;
</pre
                            >
                        </highlight>
                    </template>
                </div>

                <!-- Video -->
                <div class="panel">
                    <div class="flex items-center justify-between mb-5">
                        <h5 class="font-semibold text-lg dark:text-white-light">Video</h5>
                        <a
                            class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600"
                            href="javascript:;"
                            @click="toggleCode('code6')"
                        >
                            <span class="flex items-center">
                                <icon-code class="me-2" />
                                Code
                            </span>
                        </a>
                    </div>

                    <div class="mb-5">
                        <!-- Trigger -->
                        <div class="flex items-center justify-center">
                            <button type="button" class="btn btn-primary" @click="modal8 = true">Play Youtube</button>
                        </div>

                        <!-- Modal -->
                        <TransitionRoot appear :show="modal8" as="template">
                            <Dialog as="div" @close="modal8 = false" class="relative z-[51]">
                                <TransitionChild
                                    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"
                                >
                                    <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                </TransitionChild>

                                <div class="fixed inset-0 overflow-y-auto">
                                    <div class="flex min-h-full items-start justify-center px-4 py-8">
                                        <TransitionChild
                                            as="template"
                                            enter="duration-300 ease-out"
                                            enter-from="opacity-0 scale-95"
                                            enter-to="opacity-100 scale-100"
                                            leave="duration-200 ease-in"
                                            leave-from="opacity-100 scale-100"
                                            leave-to="opacity-0 scale-95"
                                        >
                                            <DialogPanel class="relative overflow-hidden w-full max-w-3xl py-8">
                                                <button
                                                    type="button"
                                                    class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                    @click="modal8 = false"
                                                >
                                                    <icon-x />
                                                </button>
                                                <div class="p-5">
                                                    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" class="w-full h-[250px] md:h-[550px]"></iframe>
                                                </div>
                                            </DialogPanel>
                                        </TransitionChild>
                                    </div>
                                </div>
                            </Dialog>
                        </TransitionRoot>
                    </div>

                    <template v-if="codeArr.includes('code6')">
                        <highlight>
                            <pre>
&lt;!-- video --&gt;
&lt;div class=&quot;mb-5&quot;&gt;
  &lt;!-- Trigger --&gt;
  &lt;div class=&quot;flex items-center justify-center&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; @click=&quot;modal8 = true&quot;&gt;Play Youtube&lt;/button&gt;
  &lt;/div&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal8&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal8 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild as=&quot;template&quot; enter=&quot;duration-300 ease-out&quot; enter-from=&quot;opacity-0&quot; enter-to=&quot;opacity-100&quot; leave=&quot;duration-200 ease-in&quot; leave-from=&quot;opacity-100&quot; leave-to=&quot;opacity-0&quot;&gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;relative overflow-hidden w-full max-w-3xl py-8&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal8 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;iframe src=&quot;https://www.youtube.com/embed/tgbNymZ7vqY&quot; class=&quot;w-full h-[250px] md:h-[550px]&quot;&gt;&lt;/iframe&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- script --&gt;
&lt;script lang=&quot;ts&quot; setup&gt;
import { ref } from 'vue';
import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
import { useAppStore } from '@/stores/index';
const store = useAppStore();
const modal8 = ref(false);
&lt;/script&gt;
</pre
                            >
                        </highlight>
                    </template>
                </div>

                <!-- Animation Style Modal -->
                <div class="panel lg:col-span-2">
                    <div class="flex items-center justify-between mb-5">
                        <h5 class="font-semibold text-lg dark:text-white-light">Animation Style Modal</h5>
                        <a
                            class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600"
                            href="javascript:;"
                            @click="toggleCode('code7')"
                        >
                            <span class="flex items-center">
                                <icon-code class="me-2" />
                                Code
                            </span>
                        </a>
                    </div>
                    <div class="mb-5">
                        <div class="flex flex-wrap items-center justify-center gap-2">
                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-primary" @click="modal9 = true">FadeIn</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal9" as="template">
                                    <Dialog as="div" @close="modal9 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <DialogPanel
                                                    class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__fadeIn"
                                                >
                                                    <button
                                                        type="button"
                                                        class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                        @click="modal9 = false"
                                                    >
                                                        <icon-x />
                                                    </button>
                                                    <div
                                                        class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                    >
                                                        Modal Title
                                                    </div>
                                                    <div class="p-5">
                                                        <p>
                                                            Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit
                                                            sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                            Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                        </p>

                                                        <div class="flex justify-end items-center mt-8">
                                                            <button type="button" @click="modal9 = false" class="btn btn-outline-danger">Discard</button>
                                                            <button type="button" @click="modal9 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                Save
                                                            </button>
                                                        </div>
                                                    </div>
                                                </DialogPanel>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-info" @click="modal10 = true">SlideIn Down</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal10" as="template">
                                    <Dialog as="div" @close="modal10 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <DialogPanel
                                                    class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__slideInDown"
                                                >
                                                    <button
                                                        type="button"
                                                        class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                        @click="modal10 = false"
                                                    >
                                                        <icon-x />
                                                    </button>
                                                    <div
                                                        class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                    >
                                                        Modal Title
                                                    </div>
                                                    <div class="p-5">
                                                        <p>
                                                            Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit
                                                            sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                            Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                        </p>

                                                        <div class="flex justify-end items-center mt-8">
                                                            <button type="button" @click="modal10 = false" class="btn btn-outline-danger">Discard</button>
                                                            <button type="button" @click="modal10 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                Save
                                                            </button>
                                                        </div>
                                                    </div>
                                                </DialogPanel>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-success" @click="modal11 = true">FadeIn Up</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal11" as="template">
                                    <Dialog as="div" @close="modal11 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <DialogPanel
                                                    class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__fadeInUp"
                                                >
                                                    <button
                                                        type="button"
                                                        class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                        @click="modal11 = false"
                                                    >
                                                        <icon-x />
                                                    </button>
                                                    <div
                                                        class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                    >
                                                        Modal Title
                                                    </div>
                                                    <div class="p-5">
                                                        <p>
                                                            Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit
                                                            sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                            Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                        </p>

                                                        <div class="flex justify-end items-center mt-8">
                                                            <button type="button" @click="modal11 = false" class="btn btn-outline-danger">Discard</button>
                                                            <button type="button" @click="modal11 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                Save
                                                            </button>
                                                        </div>
                                                    </div>
                                                </DialogPanel>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-warning" @click="modal12 = true">SlideIn Up</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal12" as="template">
                                    <Dialog as="div" @close="modal12 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <DialogPanel
                                                    class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__slideInUp"
                                                >
                                                    <button
                                                        type="button"
                                                        class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                        @click="modal12 = false"
                                                    >
                                                        <icon-x />
                                                    </button>
                                                    <div
                                                        class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                    >
                                                        Modal Title
                                                    </div>
                                                    <div class="p-5">
                                                        <p>
                                                            Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit
                                                            sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                            Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                        </p>

                                                        <div class="flex justify-end items-center mt-8">
                                                            <button type="button" @click="modal12 = false" class="btn btn-outline-danger">Discard</button>
                                                            <button type="button" @click="modal12 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                Save
                                                            </button>
                                                        </div>
                                                    </div>
                                                </DialogPanel>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-danger" @click="modal13 = true">FadeIn Left</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal13" as="template">
                                    <Dialog as="div" @close="modal13 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <DialogPanel
                                                    class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated"
                                                    :class="store.rtlClass === 'rtl' ? 'animate__fadeInRight' : 'animate__fadeInLeft'"
                                                >
                                                    <button
                                                        type="button"
                                                        class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                        @click="modal13 = false"
                                                    >
                                                        <icon-x />
                                                    </button>
                                                    <div
                                                        class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                    >
                                                        Modal Title
                                                    </div>
                                                    <div class="p-5">
                                                        <p>
                                                            Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit
                                                            sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                            Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                        </p>

                                                        <div class="flex justify-end items-center mt-8">
                                                            <button type="button" @click="modal13 = false" class="btn btn-outline-danger">Discard</button>
                                                            <button type="button" @click="modal13 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                Save
                                                            </button>
                                                        </div>
                                                    </div>
                                                </DialogPanel>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-secondary" @click="modal14 = true">RotateIn Left</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal14" as="template">
                                    <Dialog as="div" @close="modal14 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <DialogPanel
                                                    class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated"
                                                    :class="store.rtlClass === 'rtl' ? 'animate__rotateInDownRight' : 'animate__rotateInDownLeft'"
                                                >
                                                    <button
                                                        type="button"
                                                        class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                        @click="modal14 = false"
                                                    >
                                                        <icon-x />
                                                    </button>
                                                    <div
                                                        class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                    >
                                                        Modal Title
                                                    </div>
                                                    <div class="p-5">
                                                        <p>
                                                            Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit
                                                            sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                            Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                        </p>

                                                        <div class="flex justify-end items-center mt-8">
                                                            <button type="button" @click="modal14 = false" class="btn btn-outline-danger">Discard</button>
                                                            <button type="button" @click="modal14 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                Save
                                                            </button>
                                                        </div>
                                                    </div>
                                                </DialogPanel>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-dark" @click="modal15 = true">FadeIn Right</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal15" as="template">
                                    <Dialog as="div" @close="modal15 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <DialogPanel
                                                    class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated"
                                                    :class="store.rtlClass === 'rtl' ? 'animate__fadeInLeft' : 'animate__fadeInRight'"
                                                >
                                                    <button
                                                        type="button"
                                                        class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                        @click="modal15 = false"
                                                    >
                                                        <icon-x />
                                                    </button>
                                                    <div
                                                        class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                    >
                                                        Modal Title
                                                    </div>
                                                    <div class="p-5">
                                                        <p>
                                                            Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit
                                                            sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                            Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                        </p>

                                                        <div class="flex justify-end items-center mt-8">
                                                            <button type="button" @click="modal15 = false" class="btn btn-outline-danger">Discard</button>
                                                            <button type="button" @click="modal15 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                Save
                                                            </button>
                                                        </div>
                                                    </div>
                                                </DialogPanel>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-primary" @click="modal16 = true">ZoomIn Up</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal16" as="template">
                                    <Dialog as="div" @close="modal16 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <DialogPanel
                                                    class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__zoomInUp"
                                                >
                                                    <button
                                                        type="button"
                                                        class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                        @click="modal16 = false"
                                                    >
                                                        <icon-x />
                                                    </button>
                                                    <div
                                                        class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                    >
                                                        Modal Title
                                                    </div>
                                                    <div class="p-5">
                                                        <p>
                                                            Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit
                                                            sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                                                            Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
                                                        </p>

                                                        <div class="flex justify-end items-center mt-8">
                                                            <button type="button" @click="modal16 = false" class="btn btn-outline-danger">Discard</button>
                                                            <button type="button" @click="modal16 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                Save
                                                            </button>
                                                        </div>
                                                    </div>
                                                </DialogPanel>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>
                        </div>
                    </div>
                    <template v-if="codeArr.includes('code7')">
                        <highlight>
                            <pre>
&lt;!-- fadein --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; @click=&quot;modal9 = true&quot;&gt;FadeIn&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal9&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal9 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__fadeIn&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal9 = false&quot;&gt;
              &lt;svg&gt; ... &lt;/svg&gt;
            &lt;/button&gt;
            &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
            &lt;div class=&quot;p-5&quot;&gt;
              &lt;p&gt;
                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
              &lt;/p&gt;

              &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal9 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal9 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/DialogPanel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- slidein down --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; @click=&quot;modal10 = true&quot;&gt;SlideIn Down&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal10&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal10 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__slideInDown&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal10 = false&quot;&gt;
              &lt;svg&gt; ... &lt;/svg&gt;
            &lt;/button&gt;
            &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
            &lt;div class=&quot;p-5&quot;&gt;
              &lt;p&gt;
                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
              &lt;/p&gt;

              &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal10 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal10 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/DialogPanel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- fadein up --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; @click=&quot;modal11 = true&quot;&gt;FadeIn Up&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal11&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal11 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__fadeInUp&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal11 = false&quot;&gt;
              &lt;svg&gt; ... &lt;/svg&gt;
            &lt;/button&gt;
            &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
            &lt;div class=&quot;p-5&quot;&gt;
              &lt;p&gt;
                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
              &lt;/p&gt;

              &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal11 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal11 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/DialogPanel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- slidein up --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot; @click=&quot;modal12 = true&quot;&gt;SlideIn Up&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal12&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal12 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__slideInUp&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal12 = false&quot;&gt;
              &lt;svg&gt; ... &lt;/svg&gt;
            &lt;/button&gt;
            &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
            &lt;div class=&quot;p-5&quot;&gt;
              &lt;p&gt;
                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
              &lt;/p&gt;

              &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal12 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal12 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/DialogPanel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- fadein left --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; @click=&quot;modal13 = true&quot;&gt;FadeIn Left&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal13&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal13 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;DialogPanel
            class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated&quot;
            :class=&quot;store.rtlClass === 'rtl' ? 'animate__fadeInRight' : 'animate__fadeInLeft'&quot;
          &gt;
            &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal13 = false&quot;&gt;
              &lt;svg&gt; ... &lt;/svg&gt;
            &lt;/button&gt;
            &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
            &lt;div class=&quot;p-5&quot;&gt;
              &lt;p&gt;
                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
              &lt;/p&gt;

              &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal13 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal13 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/DialogPanel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- rotatein left --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; @click=&quot;modal14 = true&quot;&gt;RotateIn Left&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal14&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal14 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;DialogPanel
            class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated&quot;
            :class=&quot;store.rtlClass === 'rtl' ? 'animate__rotateInDownRight' : 'animate__rotateInDownLeft'&quot;
          &gt;
            &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal14 = false&quot;&gt;
              &lt;svg&gt; ... &lt;/svg&gt;
            &lt;/button&gt;
            &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
            &lt;div class=&quot;p-5&quot;&gt;
              &lt;p&gt;
                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
              &lt;/p&gt;

              &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal14 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal14 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/DialogPanel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- fadein right --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot; @click=&quot;modal15 = true&quot;&gt;FadeIn Right&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal15&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal15 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;DialogPanel
            class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated&quot;
            :class=&quot;store.rtlClass === 'rtl' ? 'animate__fadeInLeft' : 'animate__fadeInRight'&quot;
          &gt;
            &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal15 = false&quot;&gt;
              &lt;svg&gt; ... &lt;/svg&gt;
            &lt;/button&gt;
            &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
            &lt;div class=&quot;p-5&quot;&gt;
              &lt;p&gt;
                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
              &lt;/p&gt;

              &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal15 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal15 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/DialogPanel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- zoomin up --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; @click=&quot;modal16 = true&quot;&gt;ZoomIn Up&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal16&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal16 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark animate__animated animate__zoomInUp&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal16 = false&quot;&gt;
              &lt;svg&gt; ... &lt;/svg&gt;
            &lt;/button&gt;
            &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Modal Title&lt;/div&gt;
            &lt;div class=&quot;p-5&quot;&gt;
              &lt;p&gt;
                Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient
                montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi.
              &lt;/p&gt;

              &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal16 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                &lt;button type=&quot;button&quot; @click=&quot;modal16 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/DialogPanel&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;


&lt;!-- script --&gt;
&lt;script lang=&quot;ts&quot; setup&gt;
import { ref } from 'vue';
import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay } from '@headlessui/vue';
const modal9 = ref(false);
const modal10 = ref(false);
const modal11 = ref(false);
const modal12 = ref(false);
const modal13 = ref(false);
const modal14 = ref(false);
const modal15 = ref(false);
const modal16 = ref(false);
&lt;/script&gt;
</pre
                            >
                        </highlight>
                    </template>
                </div>

                <!-- Custom -->
                <div class="panel lg:col-span-2">
                    <div class="flex items-center justify-between mb-5">
                        <h5 class="font-semibold text-lg dark:text-white-light">Custom</h5>
                        <a
                            class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600"
                            href="javascript:;"
                            @click="toggleCode('code8')"
                        >
                            <span class="flex items-center">
                                <icon-code class="me-2" />
                                Code
                            </span>
                        </a>
                    </div>
                    <div class="mb-5">
                        <p class="text-center mb-4">More Custom Modals.</p>
                        <div class="flex flex-wrap items-center justify-center gap-2">
                            <!-- standard  -->
                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-primary" @click="modal17 = true">Standard</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal17" as="template">
                                    <Dialog as="div" @close="modal17 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <TransitionChild
                                                    as="template"
                                                    enter="duration-300 ease-out"
                                                    enter-from="opacity-0 scale-95"
                                                    enter-to="opacity-100 scale-100"
                                                    leave="duration-200 ease-in"
                                                    leave-from="opacity-100 scale-100"
                                                    leave-to="opacity-0 scale-95"
                                                >
                                                    <DialogPanel
                                                        class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark"
                                                    >
                                                        <div
                                                            class="flex items-center justify-center dark:text-white-dark/70 text-base font-medium text-[#1f2937] p-5"
                                                        >
                                                            <div class="flex items-center justify-center w-16 h-16 rounded-full bg-[#f1f2f3] dark:bg-white/10">
                                                                <icon-bell class="w-7 h-7" />
                                                            </div>
                                                        </div>
                                                        <div class="p-5">
                                                            <div class="text-white-dark text-center text-sm">
                                                                <p>
                                                                    Vivamus vitae hendrerit neque. Orci varius natoque penatibus et magnis dis parturient
                                                                    montes, nascetur ridiculus mus. Morbi consequat auctor turpis, vitae dictum augue efficitur
                                                                    vitae. Vestibulum a risus ipsum. Quisque nec lacus dolor. Quisque ornare tempor orci id
                                                                    rutrum.
                                                                </p>
                                                            </div>
                                                            <div class="flex justify-end items-center mt-8">
                                                                <button type="button" class="btn btn-outline-danger" @click="modal17 = false">Discard</button>
                                                                <button type="button" class="btn btn-primary ltr:ml-4 rtl:mr-4" @click="modal17 = false">
                                                                    Save
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </DialogPanel>
                                                </TransitionChild>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <!-- tabs -->
                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-info" @click="modal18 = true">Tabs</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal18" as="template">
                                    <Dialog as="div" @close="modal18 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <TransitionChild
                                                    as="template"
                                                    enter="duration-300 ease-out"
                                                    enter-from="opacity-0 scale-95"
                                                    enter-to="opacity-100 scale-100"
                                                    leave="duration-200 ease-in"
                                                    leave-from="opacity-100 scale-100"
                                                    leave-to="opacity-0 scale-95"
                                                >
                                                    <DialogPanel
                                                        class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark"
                                                    >
                                                        <button
                                                            type="button"
                                                            class="absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                            @click="modal18 = false"
                                                        >
                                                            <icon-x />
                                                        </button>
                                                        <div
                                                            class="text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]"
                                                        >
                                                            Tabs
                                                        </div>
                                                        <div class="p-5">
                                                            <TabGroup as="div">
                                                                <TabList class="flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]">
                                                                    <Tab as="template" v-slot="{ selected }">
                                                                        <a
                                                                            href="javascript:;"
                                                                            class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none"
                                                                            :class="{
                                                                                '!border-white-light !border-b-white  text-primary dark:!border-[#191e3a] dark:!border-b-black':
                                                                                    selected,
                                                                            }"
                                                                            >Home</a
                                                                        >
                                                                    </Tab>
                                                                    <Tab as="template" v-slot="{ selected }">
                                                                        <a
                                                                            href="javascript:;"
                                                                            class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none"
                                                                            :class="{
                                                                                '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black':
                                                                                    selected,
                                                                            }"
                                                                            >Profile</a
                                                                        >
                                                                    </Tab>
                                                                    <Tab as="template" v-slot="{ selected }">
                                                                        <a
                                                                            href="javascript:;"
                                                                            class="p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none"
                                                                            :class="{
                                                                                '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black':
                                                                                    selected,
                                                                            }"
                                                                            >Contact</a
                                                                        >
                                                                    </Tab>
                                                                    <Tab as="template" disabled>
                                                                        <a
                                                                            href="javascript:;"
                                                                            class="p-3.5 py-2 -mb-[1px] block pointer-events-none text-white-light dark:text-dark"
                                                                            >Disabled</a
                                                                        >
                                                                    </Tab>
                                                                </TabList>
                                                                <TabPanels class="pt-5 flex-1 text-sm">
                                                                    <TabPanel>
                                                                        <h4 class="font-semibold text-2xl mb-4">We move your world!</h4>
                                                                        <p class="mb-4">
                                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                                                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                                                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                                        </p>
                                                                        <p>
                                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                                                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                                                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                                                        </p>
                                                                    </TabPanel>
                                                                    <TabPanel>
                                                                        <div class="flex items-start">
                                                                            <div class="w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none">
                                                                                <img
                                                                                    src="/assets/images/profile-34.jpeg"
                                                                                    alt=""
                                                                                    class="w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover"
                                                                                />
                                                                            </div>
                                                                            <div class="flex-auto">
                                                                                <h5 class="text-xl font-medium mb-4">Media heading</h5>
                                                                                <p class="text-white-dark">
                                                                                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
                                                                                    ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
                                                                                    viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
                                                                                    lacinia congue felis in faucibus.
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </TabPanel>
                                                                    <TabPanel>
                                                                        <p>
                                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                                                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                                                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                                                                            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                                                                            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                                                            deserunt mollit anim id est laborum.
                                                                        </p>
                                                                    </TabPanel>
                                                                    <TabPanel>Disabled</TabPanel>
                                                                </TabPanels>
                                                            </TabGroup>
                                                            <div class="flex justify-end items-center mt-8">
                                                                <button type="button" @click="modal18 = false" class="btn btn-outline-danger">Discard</button>
                                                                <button type="button" @click="modal18 = false" class="btn btn-primary ltr:ml-4 rtl:mr-4">
                                                                    Save
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </DialogPanel>
                                                </TransitionChild>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <!-- profile -->
                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-success" @click="modal19 = true">Profile</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal19" as="template">
                                    <Dialog as="div" @close="modal19 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <TransitionChild
                                                    as="template"
                                                    enter="duration-300 ease-out"
                                                    enter-from="opacity-0 scale-95"
                                                    enter-to="opacity-100 scale-100"
                                                    leave="duration-200 ease-in"
                                                    leave-from="opacity-100 scale-100"
                                                    leave-to="opacity-0 scale-95"
                                                >
                                                    <DialogPanel
                                                        class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-[300px] text-black dark:text-white-dark bg-secondary dark:bg-secondary"
                                                    >
                                                        <div class="px-5 pt-5 ltr:text-right rtl:text-left">
                                                            <button
                                                                type="button"
                                                                class="text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none"
                                                                @click="modal19 = false"
                                                            >
                                                                <icon-x class="w-5 h-5" />
                                                            </button>
                                                        </div>
                                                        <div class="p-5">
                                                            <div class="text-white dark:text-white-light text-center">
                                                                <div class="rounded-full w-20 h-20 mx-auto mb-7 overflow-hidden">
                                                                    <img src="/assets/images/profile-16.jpeg" alt="" class="w-full h-full object-cover" />
                                                                </div>
                                                                <p class="font-semibold">Click on view to access <br />your profile.</p>
                                                            </div>
                                                            <div class="flex justify-center items-center mt-8 mb-5">
                                                                <button type="button" class="btn bg-white text-black dark:btn-dark">View</button>
                                                            </div>
                                                        </div>
                                                    </DialogPanel>
                                                </TransitionChild>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <!-- login -->
                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-warning" @click="modal20 = true">Login</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal20" as="template">
                                    <Dialog as="div" @close="modal20 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <TransitionChild
                                                    as="template"
                                                    enter="duration-300 ease-out"
                                                    enter-from="opacity-0 scale-95"
                                                    enter-to="opacity-100 scale-100"
                                                    leave="duration-200 ease-in"
                                                    leave-from="opacity-100 scale-100"
                                                    leave-to="opacity-0 scale-95"
                                                >
                                                    <DialogPanel
                                                        class="panel border-0 px-4 py-1 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark"
                                                    >
                                                        <button
                                                            type="button"
                                                            class="absolute top-7 ltr:right-9 rtl:left-9 text-white-dark hover:text-dark outline-none"
                                                            @click="modal20 = false"
                                                        >
                                                            <icon-x class="w-5 h-5" />
                                                        </button>
                                                        <div class="text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]">Login</div>
                                                        <div class="p-5">
                                                            <form>
                                                                <div class="relative mb-4">
                                                                    <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
                                                                        <icon-user class="w-5 h-5" />
                                                                    </span>
                                                                    <input type="email" placeholder="Email" class="form-input ltr:pl-10 rtl:pr-10" />
                                                                </div>
                                                                <div class="relative mb-4">
                                                                    <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
                                                                        <icon-lock class="w-5 h-5" />
                                                                    </span>
                                                                    <input type="password" placeholder="Password" class="form-input ltr:pl-10 rtl:pr-10" />
                                                                </div>
                                                                <button type="button" class="btn btn-primary w-full">Login</button>
                                                            </form>
                                                        </div>
                                                        <div class="my-4 text-center text-xs text-white-dark dark:text-white-dark/70">OR</div>
                                                        <div class="flex items-center justify-center gap-3 mb-5">
                                                            <a href="javascript:void(0);" class="btn btn-outline-primary flex gap-1">
                                                                <icon-facebook class="w-5 h-5 shrink-0" />
                                                                <span>Facebook</span>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-outline-danger flex gap-1">
                                                                <icon-github class="shrink-0" />
                                                                <span>Github</span>
                                                            </a>
                                                        </div>
                                                        <div class="p-5 border-t border-[#ebe9f1] dark:border-white/10 text-sm">
                                                            <p class="text-center text-white-dark dark:text-white-dark/70">
                                                                Looking to
                                                                <a href="javascript:;" class="text-[#515365] hover:underline dark:text-white-dark"
                                                                    >create an account?</a
                                                                >
                                                            </p>
                                                        </div>
                                                    </DialogPanel>
                                                </TransitionChild>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <!-- Register -->
                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-danger" @click="modal21 = true">Register</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal21" as="template">
                                    <Dialog as="div" @close="modal21 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <TransitionChild
                                                    as="template"
                                                    enter="duration-300 ease-out"
                                                    enter-from="opacity-0 scale-95"
                                                    enter-to="opacity-100 scale-100"
                                                    leave="duration-200 ease-in"
                                                    leave-from="opacity-100 scale-100"
                                                    leave-to="opacity-0 scale-95"
                                                >
                                                    <DialogPanel
                                                        class="panel border-0 px-4 py-1 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark"
                                                    >
                                                        <button
                                                            type="button"
                                                            class="absolute top-7 ltr:right-9 rtl:left-9 text-white-dark hover:text-dark outline-none"
                                                            @click="modal21 = false"
                                                        >
                                                            <icon-x class="w-5 h-5" />
                                                        </button>
                                                        <div class="text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]">Register</div>
                                                        <div class="p-5">
                                                            <form>
                                                                <div class="relative mb-4">
                                                                    <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
                                                                        <icon-user class="w-5 h-5" />
                                                                    </span>
                                                                    <input type="text" placeholder="Name" class="form-input ltr:pl-10 rtl:pr-10" />
                                                                </div>
                                                                <div class="relative mb-4">
                                                                    <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
                                                                        <icon-at />
                                                                    </span>
                                                                    <input type="email" placeholder="Email" class="form-input ltr:pl-10 rtl:pr-10" />
                                                                </div>
                                                                <div class="relative mb-4">
                                                                    <span class="absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark">
                                                                        <icon-lock class="w-5 h-5" />
                                                                    </span>
                                                                    <input type="password" placeholder="Password" class="form-input ltr:pl-10 rtl:pr-10" />
                                                                </div>
                                                                <button type="button" class="btn btn-primary w-full">Submit</button>
                                                            </form>
                                                        </div>
                                                        <div class="my-4 text-center text-xs text-white-dark dark:text-white-dark/70">OR</div>
                                                        <div class="flex items-center justify-center gap-3 mb-5">
                                                            <a href="javascript:void(0);" class="btn btn-outline-primary flex gap-1">
                                                                <icon-facebook class="w-5 h-5 shrink-0" />
                                                                <span>Facebook</span>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-outline-danger flex gap-1">
                                                                <icon-github class="shrink-0" />
                                                                <span>Github</span>
                                                            </a>
                                                        </div>
                                                        <div class="p-5 border-t border-[#ebe9f1] dark:border-white/10 text-sm">
                                                            <p class="text-center text-white-dark dark:text-white-dark/70">
                                                                Already have
                                                                <a href="javascript:;" class="text-[#515365] hover:underline dark:text-white-dark">Login?</a>
                                                            </p>
                                                        </div>
                                                    </DialogPanel>
                                                </TransitionChild>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>

                            <!-- slider -->
                            <div>
                                <!-- Trigger -->
                                <button type="button" class="btn btn-secondary" @click="modal22 = true">Slider</button>

                                <!-- Modal -->
                                <TransitionRoot appear :show="modal22" as="template">
                                    <Dialog as="div" @close="modal22 = false" class="relative z-[51]">
                                        <TransitionChild
                                            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"
                                        >
                                            <DialogOverlay class="fixed inset-0 bg-[black]/60" />
                                        </TransitionChild>

                                        <div class="fixed inset-0 overflow-y-auto">
                                            <div class="flex min-h-full items-start justify-center px-4 py-8">
                                                <TransitionChild
                                                    as="template"
                                                    enter="duration-300 ease-out"
                                                    enter-from="opacity-0 scale-95"
                                                    enter-to="opacity-100 scale-100"
                                                    leave="duration-200 ease-in"
                                                    leave-from="opacity-100 scale-100"
                                                    leave-to="opacity-0 scale-95"
                                                >
                                                    <DialogPanel
                                                        class="panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-xl text-black dark:text-white-dark"
                                                    >
                                                        <button
                                                            type="button"
                                                            class="absolute top-7 ltr:right-5 rtl:left-5 text-white-dark hover:text-dark outline-none"
                                                            @click="modal22 = false"
                                                        >
                                                            <icon-x class="w-5 h-5" />
                                                        </button>
                                                        <div class="text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]">Slider</div>
                                                        <div class="px-5">
                                                            <swiper
                                                                :modules="[Navigation, Pagination]"
                                                                :navigation="{ nextEl: '.swiper-button-next-ex1', prevEl: '.swiper-button-prev-ex1' }"
                                                                :pagination="{ clickable: true }"
                                                                class="max-w-3xl mx-auto mb-5"
                                                                id="slider1"
                                                                :dir="store.rtlClass"
                                                                :key="store.rtlClass === 'rtl' ? 'true' : 'false'"
                                                            >
                                                                <template v-for="(item, i) in 3" :key="i">
                                                                    <swiper-slide>
                                                                        <img :src="`/assets/images/carousel${item}.jpeg`" class="w-full" alt="" />
                                                                    </swiper-slide>
                                                                </template>
                                                                <a
                                                                    href="javascript:;"
                                                                    class="swiper-button-prev-ex1 grid place-content-center ltr:left-2 rtl:right-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"
                                                                >
                                                                    <icon-caret-down class="w-5 h-5 rtl:-rotate-90 rotate-90"/>
                                                                </a>
                                                                <a
                                                                    href="javascript:;"
                                                                    class="swiper-button-next-ex1 grid place-content-center ltr:right-2 rtl:left-2 p-1 transition text-primary hover:text-white border border-primary hover:border-primary hover:bg-primary rounded-full absolute z-[999] top-1/2 -translate-y-1/2"
                                                                >
                                                                    <icon-caret-down class="w-5 h-5 rtl:rotate-90 -rotate-90"/>
                                                                </a>
                                                            </swiper>
                                                        </div>
                                                    </DialogPanel>
                                                </TransitionChild>
                                            </div>
                                        </div>
                                    </Dialog>
                                </TransitionRoot>
                            </div>
                        </div>
                    </div>
                    <template v-if="codeArr.includes('code8')">
                        <highlight>
                            <pre>
&lt;!-- standard  --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; @click=&quot;modal17 = true&quot;&gt;Standard&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal17&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal17 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark&quot;&gt;
              &lt;div class=&quot;flex items-center justify-center dark:text-white-dark/70 text-base font-medium text-[#1f2937] p-5&quot;&gt;
                &lt;div class=&quot;flex items-center justify-center w-16 h-16 rounded-full bg-[#f1f2f3] dark:bg-white/10&quot;&gt;
                  &lt;svg&gt; ... &lt;/svg&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;div class=&quot;text-white-dark text-center text-sm&quot;&gt;
                  &lt;p&gt;
                    Vivamus vitae hendrerit neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat auctor turpis, vitae dictum
                    augue efficitur vitae. Vestibulum a risus ipsum. Quisque nec lacus dolor. Quisque ornare tempor orci id rutrum.
                  &lt;/p&gt;
                &lt;/div&gt;
                &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger&quot; @click=&quot;modal17 = false&quot;&gt;Discard&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot; @click=&quot;modal17 = false&quot;&gt;Save&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- tabs --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot; @click=&quot;modal18 = true&quot;&gt;Tabs&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal18&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal18 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-lg text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-4 ltr:right-4 rtl:left-4 text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal18 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-bold bg-[#fbfbfb] dark:bg-[#121c2c] ltr:pl-5 rtl:pr-5 py-3 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Tabs&lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;TabGroup as=&quot;div&quot;&gt;
                  &lt;TabList class=&quot;flex flex-wrap mt-3 border-b border-white-light dark:border-[#191e3a]&quot;&gt;
                    &lt;Tab as=&quot;template&quot; v-slot=&quot;{ selected }&quot;&gt;
                      &lt;a
                        href=&quot;javascript:;&quot;
                        class=&quot;p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none&quot;
                        :class=&quot;{ '!border-white-light !border-b-white  text-primary dark:!border-[#191e3a] dark:!border-b-black': selected }&quot;
                        &gt;Home&lt;/a
                      &gt;
                    &lt;/Tab&gt;
                    &lt;Tab as=&quot;template&quot; v-slot=&quot;{ selected }&quot;&gt;
                      &lt;a
                        href=&quot;javascript:;&quot;
                        class=&quot;p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none&quot;
                        :class=&quot;{ '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black': selected }&quot;
                        &gt;Profile&lt;/a
                      &gt;
                    &lt;/Tab&gt;
                    &lt;Tab as=&quot;template&quot; v-slot=&quot;{ selected }&quot;&gt;
                      &lt;a
                        href=&quot;javascript:;&quot;
                        class=&quot;p-3.5 py-2 -mb-[1px] block border border-transparent hover:text-primary dark:hover:border-b-black !outline-none&quot;
                        :class=&quot;{ '!border-white-light !border-b-white text-primary dark:!border-[#191e3a] dark:!border-b-black': selected }&quot;
                        &gt;Contact&lt;/a
                      &gt;
                    &lt;/Tab&gt;
                    &lt;Tab as=&quot;template&quot; disabled&gt;
                      &lt;a href=&quot;javascript:;&quot; class=&quot;p-3.5 py-2 -mb-[1px] block pointer-events-none text-white-light dark:text-dark&quot;&gt;Disabled&lt;/a&gt;
                    &lt;/Tab&gt;
                  &lt;/TabList&gt;
                  &lt;TabPanels class=&quot;pt-5 flex-1 text-sm&quot;&gt;
                    &lt;TabPanel&gt;
                      &lt;h4 class=&quot;font-semibold text-2xl mb-4&quot;&gt;We move your world!&lt;/h4&gt;
                      &lt;p class=&quot;mb-4&quot;&gt;
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                      &lt;/p&gt;
                      &lt;p&gt;
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                      &lt;/p&gt;
                    &lt;/TabPanel&gt;
                    &lt;TabPanel&gt;
                      &lt;div class=&quot;flex items-start&quot;&gt;
                        &lt;div class=&quot;w-20 h-20 ltr:mr-4 rtl:ml-4 flex-none&quot;&gt;
                          &lt;img src=&quot;/assets/images/profile-34.jpeg&quot; alt=&quot;&quot; class=&quot;w-20 h-20 m-0 rounded-full ring-2 ring-[#ebedf2] dark:ring-white-dark object-cover&quot; /&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;flex-auto&quot;&gt;
                          &lt;h5 class=&quot;text-xl font-medium mb-4&quot;&gt;Media heading&lt;/h5&gt;
                          &lt;p class=&quot;text-white-dark&quot;&gt;
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
                            turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                          &lt;/p&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/TabPanel&gt;
                    &lt;TabPanel&gt;
                      &lt;p&gt;
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                      &lt;/p&gt;
                    &lt;/TabPanel&gt;
                    &lt;TabPanel&gt;Disabled&lt;/TabPanel&gt;
                  &lt;/TabPanels&gt;
                &lt;/TabGroup&gt;
                &lt;div class=&quot;flex justify-end items-center mt-8&quot;&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal18 = false&quot; class=&quot;btn btn-outline-danger&quot;&gt;Discard&lt;/button&gt;
                  &lt;button type=&quot;button&quot; @click=&quot;modal18 = false&quot; class=&quot;btn btn-primary ltr:ml-4 rtl:mr-4&quot;&gt;Save&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- profile --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot; @click=&quot;modal19 = true&quot;&gt;Profile&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal19&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal19 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-[300px] text-black dark:text-white-dark bg-secondary dark:bg-secondary&quot;&gt;
              &lt;div class=&quot;px-5 pt-5 text-right&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;text-gray-400 hover:text-gray-800 dark:hover:text-gray-600 outline-none&quot; @click=&quot;modal19 = false&quot;&gt;
                  &lt;svg&gt; ... &lt;/svg&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;div class=&quot;text-white dark:text-white-light text-center&quot;&gt;
                  &lt;div class=&quot;rounded-full w-20 h-20 mx-auto mb-7 overflow-hidden&quot;&gt;&lt;img src=&quot;/assets/images/profile-16.jpeg&quot; alt=&quot;&quot; class=&quot;w-full h-full object-cover&quot; /&gt;&lt;/div&gt;
                  &lt;p class=&quot;font-semibold&quot;&gt;Click on view to access &lt;br /&gt;your profile.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class=&quot;flex justify-center items-center mt-8 mb-5&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn bg-white text-black dark:btn-dark&quot;&gt;View&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- login --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot; @click=&quot;modal20 = true&quot;&gt;Login&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal20&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal20 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 px-4 py-1 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-7 ltr:right-9 rtl:left-9 text-white-dark hover:text-dark outline-none&quot; @click=&quot;modal20 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Login&lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;form&gt;
                  &lt;div class=&quot;relative mb-4&quot;&gt;
                    &lt;span class=&quot;absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark&quot;&gt;
                      &lt;svg&gt; ... &lt;/svg&gt;
                    &lt;/span&gt;
                    &lt;input type=&quot;email&quot; placeholder=&quot;Email&quot; class=&quot;form-input ltr:pl-10 rtl:pr-10&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;relative mb-4&quot;&gt;
                    &lt;span class=&quot;absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark&quot;&gt;
                      &lt;svg&gt; ... &lt;/svg&gt;
                    &lt;/span&gt;
                    &lt;input type=&quot;password&quot; placeholder=&quot;Password&quot; class=&quot;form-input ltr:pl-10 rtl:pr-10&quot; /&gt;
                  &lt;/div&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary w-full&quot;&gt;Login&lt;/button&gt;
                &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class=&quot;my-4 text-center text-xs text-white-dark dark:text-white-dark/70&quot;&gt;OR&lt;/div&gt;
              &lt;div class=&quot;flex items-center justify-center gap-3 mb-5&quot;&gt;
                &lt;a href=&quot;javascript:void(0);&quot; class=&quot;btn btn-outline-primary flex gap-1&quot;&gt;
                  &lt;svg&gt; ... &lt;/svg&gt;
                  &lt;span&gt;Facebook&lt;/span&gt;
                &lt;/a&gt;
                &lt;a href=&quot;javascript:void(0);&quot; class=&quot;btn btn-outline-danger flex gap-1&quot;&gt;
                  &lt;svg&gt; ... &lt;/svg&gt;
                  &lt;span&gt;Github&lt;/span&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;p-5 border-t border-[#ebe9f1] dark:border-white/10 text-sm&quot;&gt;
                &lt;p class=&quot;text-center text-white-dark dark:text-white-dark/70&quot;&gt;
                  Looking to &lt;a href=&quot;javascript:;&quot; class=&quot;text-[#515365] hover:underline dark:text-white-dark&quot;&gt;create an account?&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- Register --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; @click=&quot;modal21 = true&quot;&gt;Register&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal21&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal21 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 px-4 py-1 rounded-lg overflow-hidden w-full max-w-sm text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-7 ltr:right-9 rtl:left-9 text-white-dark hover:text-dark outline-none&quot; @click=&quot;modal21 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Register&lt;/div&gt;
              &lt;div class=&quot;p-5&quot;&gt;
                &lt;form&gt;
                  &lt;div class=&quot;relative mb-4&quot;&gt;
                    &lt;span class=&quot;absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark&quot;&gt;
                      &lt;svg&gt; ... &lt;/svg&gt;
                    &lt;/span&gt;
                    &lt;input type=&quot;text&quot; placeholder=&quot;Name&quot; class=&quot;form-input ltr:pl-10 rtl:pr-10&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;relative mb-4&quot;&gt;
                    &lt;span class=&quot;absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark&quot;&gt;
                      &lt;svg&gt; ... &lt;/svg&gt;
                    &lt;/span&gt;
                    &lt;input type=&quot;email&quot; placeholder=&quot;Email&quot; class=&quot;form-input ltr:pl-10 rtl:pr-10&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;relative mb-4&quot;&gt;
                    &lt;span class=&quot;absolute ltr:left-3 rtl:right-3 top-1/2 -translate-y-1/2 dark:text-white-dark&quot;&gt;
                      &lt;svg&gt; ... &lt;/svg&gt;
                    &lt;/span&gt;
                    &lt;input type=&quot;password&quot; placeholder=&quot;Password&quot; class=&quot;form-input ltr:pl-10 rtl:pr-10&quot; /&gt;
                  &lt;/div&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary w-full&quot;&gt;Submit&lt;/button&gt;
                &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class=&quot;my-4 text-center text-xs text-white-dark dark:text-white-dark/70&quot;&gt;OR&lt;/div&gt;
              &lt;div class=&quot;flex items-center justify-center gap-3 mb-5&quot;&gt;
                &lt;a href=&quot;javascript:void(0);&quot; class=&quot;btn btn-outline-primary flex gap-1&quot;&gt;
                  &lt;svg&gt; ... &lt;/svg&gt;
                  &lt;span&gt;Facebook&lt;/span&gt;
                &lt;/a&gt;
                &lt;a href=&quot;javascript:void(0);&quot; class=&quot;btn btn-outline-danger flex gap-1&quot;&gt;
                  &lt;svg&gt; ... &lt;/svg&gt;
                  &lt;span&gt;Github&lt;/span&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;p-5 border-t border-[#ebe9f1] dark:border-white/10 text-sm&quot;&gt;
                &lt;p class=&quot;text-center text-white-dark dark:text-white-dark/70&quot;&gt;
                  Already have &lt;a href=&quot;javascript:;&quot; class=&quot;text-[#515365] hover:underline dark:text-white-dark&quot;&gt;Login?&lt;/a&gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- slider --&gt;
&lt;div&gt;
  &lt;!-- Trigger --&gt;
  &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; @click=&quot;modal22 = true&quot;&gt;Slider&lt;/button&gt;

  &lt;!-- Modal --&gt;
  &lt;TransitionRoot appear :show=&quot;modal22&quot; as=&quot;template&quot;&gt;
    &lt;Dialog as=&quot;div&quot; @close=&quot;modal22 = false&quot; class=&quot;relative z-50&quot;&gt;
      &lt;TransitionChild
        as=&quot;template&quot;
        enter=&quot;duration-300 ease-out&quot;
        enter-from=&quot;opacity-0&quot;
        enter-to=&quot;opacity-100&quot;
        leave=&quot;duration-200 ease-in&quot;
        leave-from=&quot;opacity-100&quot;
        leave-to=&quot;opacity-0&quot;
      &gt;
        &lt;DialogOverlay class=&quot;fixed inset-0 bg-[black]/60&quot; /&gt;
      &lt;/TransitionChild&gt;

      &lt;div class=&quot;fixed inset-0 overflow-y-auto&quot;&gt;
        &lt;div class=&quot;flex min-h-full items-start justify-center px-4 py-8&quot;&gt;
          &lt;TransitionChild
            as=&quot;template&quot;
            enter=&quot;duration-300 ease-out&quot;
            enter-from=&quot;opacity-0 scale-95&quot;
            enter-to=&quot;opacity-100 scale-100&quot;
            leave=&quot;duration-200 ease-in&quot;
            leave-from=&quot;opacity-100 scale-100&quot;
            leave-to=&quot;opacity-0 scale-95&quot;
          &gt;
            &lt;DialogPanel class=&quot;panel border-0 p-0 rounded-lg overflow-hidden w-full max-w-xl text-black dark:text-white-dark&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;absolute top-7 ltr:right-5 rtl:left-5 text-white-dark hover:text-dark outline-none&quot; @click=&quot;modal22 = false&quot;&gt;
                &lt;svg&gt; ... &lt;/svg&gt;
              &lt;/button&gt;
              &lt;div class=&quot;text-lg font-semibold ltr:pl-5 rtl:pr-5 py-5 ltr:pr-[50px] rtl:pl-[50px]&quot;&gt;Slider&lt;/div&gt;
              &lt;div class=&quot;px-5&quot;&gt;
                &lt;swiper
                  :modules=&quot;[Navigation, Pagination]&quot;
                  :navigation=&quot;{ nextEl: '.swiper-button-next-ex1', prevEl: '.swiper-button-prev-ex1' }&quot;
                  :pagination=&quot;{ clickable: true }&quot;
                  class=&quot;max-w-3xl mx-auto mb-5&quot;
                  id=&quot;slider1&quot;
                &gt;
                  &lt;template v-for=&quot;(item, i) in 3&quot; :key=&quot;i&quot;&gt;
                    &lt;swiper-slide&gt;
                      &lt;img :src=&quot;`/assets/images/carousel${item}.jpeg`&quot; class=&quot;w-full&quot; alt=&quot;&quot; /&gt;
                    &lt;/swiper-slide&gt;
                  &lt;/template&gt;
                  &lt;a
                    href=&quot;javascript:;&quot;
                    class=&quot;
                      swiper-button-prev-ex1
                      grid
                      place-content-center
                      ltr:left-2
                      rtl:right-2
                      p-1
                      transition
                      text-primary
                      hover:text-white
                      border border-primary
                      hover:border-primary hover:bg-primary
                      rounded-full
                      absolute
                      z-[999]
                      top-1/2
                      -translate-y-1/2
                    &quot;
                  &gt;
                    &lt;svg&gt; ... &lt;/svg&gt;
                  &lt;/a&gt;
                  &lt;a
                    href=&quot;javascript:;&quot;
                    class=&quot;
                      swiper-button-next-ex1
                      grid
                      place-content-center
                      ltr:right-2
                      rtl:left-2
                      p-1
                      transition
                      text-primary
                      hover:text-white
                      border border-primary
                      hover:border-primary hover:bg-primary
                      rounded-full
                      absolute
                      z-[999]
                      top-1/2
                      -translate-y-1/2
                    &quot;
                  &gt;
                    &lt;svg&gt; ... &lt;/svg&gt;
                  &lt;/a&gt;
                &lt;/swiper&gt;
              &lt;/div&gt;
            &lt;/DialogPanel&gt;
          &lt;/TransitionChild&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/Dialog&gt;
  &lt;/TransitionRoot&gt;
&lt;/div&gt;

&lt;!-- script --&gt;
&lt;script lang=&quot;ts&quot; setup&gt;
import { ref } from 'vue';
import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay, TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
const modal17 = ref(false);
const modal18 = ref(false);
const modal19 = ref(false);
const modal20 = ref(false);
const modal21 = ref(false);
const modal22 = ref(false);
&lt;/script&gt;
</pre
                            >
                        </highlight>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogOverlay, TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue';
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import { Navigation, Pagination } from 'swiper';
    import 'swiper/css';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';
    import highlight from '@/components/plugins/highlight.vue';
    import codePreview from '@/composables/codePreview';
    import { useAppStore } from '@/stores/index';
    import { useMeta } from '@/composables/use-meta';

    import IconBell from '@/components/icon/icon-bell.vue';
    import IconCode from '@/components/icon/icon-code.vue';
    import IconX from '@/components/icon/icon-x.vue';
    import IconUser from '@/components/icon/icon-user.vue';
    import IconLock from '@/components/icon/icon-lock.vue';
    import IconFacebook from '@/components/icon/icon-facebook.vue';
    import IconGithub from '@/components/icon/icon-github.vue';
    import IconAt from '@/components/icon/icon-at.vue';
    import IconCaretDown from '@/components/icon/icon-caret-down.vue';

    useMeta({ title: 'Modals' });
    const { codeArr, toggleCode } = codePreview();
    const store = useAppStore();
    const modal1 = ref(false);
    const modal2 = ref(false);
    const modal3 = ref(false);
    const modal4 = ref(false);
    const modal5 = ref(false);
    const modal6 = ref(false);
    const modal7 = ref(false);
    const modal8 = ref(false);
    const modal9 = ref(false);
    const modal10 = ref(false);
    const modal11 = ref(false);
    const modal12 = ref(false);
    const modal13 = ref(false);
    const modal14 = ref(false);
    const modal15 = ref(false);
    const modal16 = ref(false);
    const modal17 = ref(false);
    const modal18 = ref(false);
    const modal19 = ref(false);
    const modal20 = ref(false);
    const modal21 = ref(false);
    const modal22 = ref(false);
</script>
