<div class="accordion flex flex-col gap-3">
    <div class="accordion-item active group rounded-md border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
        <button class="accordion-toggle flex w-full items-center justify-between px-4 py-3 text-start font-bold text-slate-600 dark:text-slate-200">
            <span class="block text-base font-bold text-slate-600 group-[.active]:text-slate-700 dark:text-slate-300 group-[.active]:dark:text-white">
                What kind of questions can I ask the chatbot?
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ms-2 h-2.5 transition-all group-[.active]:rotate-180">
                <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
            </svg>
        </button><!-- accordion-toggle -->
        <div class="accordion-body px-4 pb-4 text-base text-slate-500 group-[.active]:block dark:text-slate-400">
            <p>
                You can ask the chatbot any question related to our products or
                services. Some common questions include.
            </p>
        </div><!-- accordion-body -->
    </div><!-- accordion-item -->
    <div class="accordion-item rounded-md border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
        <button class="accordion-toggle flex w-full items-center justify-between px-4 py-3 text-start font-bold text-slate-600 dark:text-slate-200">
            <span class="block text-base font-bold text-slate-600 group-[.active]:text-slate-700 dark:text-slate-300 group-[.active]:dark:text-white">
                What if the chatbot can’t answer my question?
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ms-2 h-2.5 transition-all group-[.active]:rotate-180">
                <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
            </svg>
        </button><!-- accordion-toggle -->
        <div class="accordion-body px-4 pb-4 text-base text-slate-500 group-[.active]:block dark:text-slate-400">
            <p>
                If the chatbot is unable to answer your question or provide the
                information you need, it will direct you to other resources such
                as our customer service team or website.
            </p>
        </div><!-- accordion-body -->
    </div><!-- accordion-item -->
    <div class="accordion-item rounded-md border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
        <button class="accordion-toggle flex w-full items-center justify-between px-4 py-3 text-start font-bold text-slate-600 dark:text-slate-200">
            <span class="block text-base font-bold text-slate-600 group-[.active]:text-slate-700 dark:text-slate-300 group-[.active]:dark:text-white">
                Are AI chatbots becoming smarter over time?
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ms-2 h-2.5 transition-all group-[.active]:rotate-180">
                <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
            </svg>
        </button><!-- accordion-toggle -->
        <div class="accordion-body px-4 pb-4 text-base text-slate-500 group-[.active]:block dark:text-slate-400">
            <p>
                Yes, AI chatbots become smarter over time through machine
                learning. With continuous user interactions, they gather more
                data, update their models, and refine their responses, leading
                to continuous improvement in their performance.
            </p>
        </div><!-- accordion-body -->
    </div><!-- accordion-item -->
    <div class="accordion-item rounded-md border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
        <button class="accordion-toggle flex w-full items-center justify-between px-4 py-3 text-start font-bold text-slate-600 dark:text-slate-200">
            <span class="block text-base font-bold text-slate-600 group-[.active]:text-slate-700 dark:text-slate-300 group-[.active]:dark:text-white">
                How do businesses benefit from using AI chatbots?
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ms-2 h-2.5 transition-all group-[.active]:rotate-180">
                <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
            </svg>
        </button><!-- accordion-toggle -->
        <div class="accordion-body px-4 pb-4 text-base text-slate-500 group-[.active]:block dark:text-slate-400">
            <p>
                Businesses benefit from AI chatbots in several ways, including
                improved customer service, cost reduction in customer support
                operations, increased efficiency, better lead generation, and
                enhanced user engagement, leading to overall improved customer
                satisfaction and loyalty.
            </p>
        </div><!-- accordion-body -->
    </div><!-- accordion-item -->
</div><!-- accordion -->

<div class="accordion flex flex-col gap-3">
    <div class="accordion-item active group rounded-2xl border border-slate-100 bg-white shadow dark:border-slate-950 dark:bg-slate-950">
        <button class="accordion-toggle flex w-full items-center justify-between px-6 py-4 text-start font-bold text-slate-600 dark:text-slate-200">
            <span class="block text-base font-bold text-slate-600 group-[.active]:text-slate-700 dark:text-slate-300 group-[.active]:dark:text-white">
                What is an AI image generator?
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ms-2 h-2.5 transition-all group-[.active]:rotate-180">
                <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
            </svg>
        </button><!-- accordion-toggle -->
        <div class="accordion-body px-6 pb-5 text-base text-slate-500 group-[.active]:block dark:text-slate-400">
            <div class="max-w-3xl">
                <p class="text-base/7">
                An AI image generator is a sophisticated tool that leverages
                advanced artificial intelligence algorithms to produce
                realistic and unique images. By understanding patterns and
                features from extensive datasets, it transforms given inputs
                or concepts into visually compelling artworks.
                </p>
            </div>
        </div><!-- accordion-body -->
    </div><!-- accordion-item -->
    <div class="accordion-item group rounded-2xl border border-slate-100 bg-white shadow dark:border-slate-950 dark:bg-slate-950">
        <button class="accordion-toggle flex w-full items-center justify-between px-6 py-4 text-start font-bold text-slate-600 dark:text-slate-200">
            <span class="block text-base font-bold text-slate-600 group-[.active]:text-slate-700 dark:text-slate-300 group-[.active]:dark:text-white">
                How does the AI image generator work?
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ms-2 h-2.5 transition-all group-[.active]:rotate-180">
                <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
            </svg>
        </button><!-- accordion-toggle -->
        <div class="accordion-body px-6 pb-5 text-base text-slate-500 group-[.active]:block dark:text-slate-400">
            <div class="max-w-3xl">
                <p class="text-base/7">
                The AI image generator operates by employing intricate
                algorithms to meticulously analyze input data. By learning
                from a vast dataset, the generator can then create images that
                resonate with the identified patterns and features, resulting
                in visually striking and unique outputs.
                </p>
            </div>  
        </div><!-- accordion-body -->
    </div><!-- accordion-item -->
    <div class="accordion-item group rounded-2xl border border-slate-100 bg-white shadow dark:border-slate-950 dark:bg-slate-950">
        <button class="accordion-toggle flex w-full items-center justify-between px-6 py-4 text-start font-bold text-slate-600 dark:text-slate-200">
            <span class="block text-base font-bold text-slate-600 group-[.active]:text-slate-700 dark:text-slate-300 group-[.active]:dark:text-white">
                Is the AI image generator suitable for beginners?
            </span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ms-2 h-2.5 transition-all group-[.active]:rotate-180">
                <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
            </svg>
        </button><!-- accordion-toggle -->
        <div class="accordion-body px-6 pb-5 text-base text-slate-500 group-[.active]:block dark:text-slate-400">
            <div class="max-w-3xl">
                <p class="text-base/7">
                Yes, our AI image generator is designed with a user-friendly
                interface, making it accessible and intuitive for beginners.
                Simply input your creative ideas, and the generator seamlessly
                handles the complex process of image creation on your behalf.
                </p>
            </div>
        </div><!-- accordion-body -->
    </div><!-- accordion-item -->
</div><!-- accordion -->

<!-- Default -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-slate-600 text-white bg-slate-600">Default</span>
<!-- Primary -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-blue-600 text-white bg-blue-600">Primary</span>
<!-- Success -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-emerald-600 text-white bg-emerald-600">Success</span>
<!-- Warning -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-amber-600 text-white bg-amber-600">Warning</span>
<!-- Info -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-sky-600 text-white bg-sky-600">Info</span>
<!-- Danger -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-rose-600 text-white bg-rose-600">Danger</span>
<!-- Default Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-slate-600 text-white bg-slate-600">Default</span>
<!-- Primary Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-blue-600 text-white bg-blue-600">Primary</span>
<!-- Success Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-emerald-600 text-white bg-emerald-600">Success</span>
<!-- Warning Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-amber-600 text-white bg-amber-600">Warning</span>
<!-- Info Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-sky-600 text-white bg-sky-600">Info</span>
<!-- Danger Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-rose-600 text-white bg-rose-600">Danger</span>

<!-- Default -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-slate-100 dark:border-slate-800 text-slate-500 dark:text-slate-200 bg-slate-100 dark:bg-slate-800">Default</span>
<!-- Primary -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-blue-100 dark:border-blue-950 text-blue-500 bg-blue-100 dark:bg-blue-950">Primary</span>
<!-- Success -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-emerald-100 dark:border-emerald-950 text-emerald-500 bg-emerald-100 dark:bg-emerald-950">Success</span>
<!-- Warning -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-amber-100 dark:border-amber-950 text-amber-500 bg-amber-100 dark:bg-amber-950">Warning</span>
<!-- Info -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-sky-100 dark:border-sky-950 text-sky-500 bg-sky-100 dark:bg-sky-950">Info</span>
<!-- Danger -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-rose-100 dark:border-rose-950 text-rose-500 bg-rose-100 dark:bg-rose-950">Danger</span>
<!-- Default Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-slate-100 dark:border-slate-800 text-slate-500 dark:text-slate-200 bg-slate-100 dark:bg-slate-800">Default</span>
<!-- Primary Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-blue-100 dark:border-blue-950 text-blue-500 bg-blue-100 dark:bg-blue-950">Primary</span>
<!-- Success Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-emerald-100 dark:border-emerald-950 text-emerald-500 bg-emerald-100 dark:bg-emerald-950">Success</span>
<!-- Warning Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-amber-100 dark:border-amber-950 text-amber-500 bg-amber-100 dark:bg-amber-950">Warning</span>
<!-- Info Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-sky-100 dark:border-sky-950 text-sky-500 bg-sky-100 dark:bg-sky-950">Info</span>
<!-- Danger Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-rose-100 dark:border-rose-950 text-rose-500 bg-rose-100 dark:bg-rose-950">Danger</span>

<!-- Default -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-200">Default</span>
<!-- Primary -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-blue-200 dark:border-blue-900 text-blue-500">Primary</span>
<!-- Success -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-emerald-200 dark:border-emerald-900 text-emerald-500">Success</span>
<!-- Warning -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-amber-200 dark:border-amber-900 text-amber-500">Warning</span>
<!-- Info -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-sky-200 dark:border-sky-900 text-sky-500">Info</span>
<!-- Danger -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-rose-200 dark:border-rose-900 text-rose-500">Danger</span>
<!-- Default Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-200">Default</span>
<!-- Primary Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-blue-200 dark:border-blue-900 text-blue-500">Primary</span>
<!-- Success Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-emerald-200 dark:border-emerald-900 text-emerald-500">Success</span>
<!-- Warning Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-amber-200 dark:border-amber-900 text-amber-500">Warning</span>
<!-- Info Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-sky-200 dark:border-sky-900 text-sky-500">Info</span>
<!-- Danger Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-rose-200 dark:border-rose-900 text-rose-500">Danger</span>

<!-- Default -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-200 bg-slate-50 dark:bg-slate-800">Default</span>
<!-- Primary -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-blue-200 dark:border-blue-800 text-blue-500 bg-blue-50 dark:bg-blue-950">Primary</span>
<!-- Success -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-emerald-200 dark:border-emerald-800 text-emerald-500 bg-emerald-50 dark:bg-emerald-950">Success</span>
<!-- Warning -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-amber-200 dark:border-amber-800 text-amber-500 bg-amber-50 dark:bg-amber-950">Warning</span>
<!-- Info -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-sky-200 dark:border-sky-800 text-sky-500 bg-sky-50 dark:bg-sky-950">Info</span>
<!-- Danger -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-rose-200 dark:border-rose-800 text-rose-500 bg-rose-50 dark:bg-rose-950">Danger</span>
<!-- Default Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-slate-200 dark:border-slate-800 text-slate-500 dark:text-slate-200 bg-slate-50 dark:bg-slate-800">Default</span>
<!-- Primary Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-blue-200 dark:border-blue-800 text-blue-500 bg-blue-50 dark:bg-blue-950">Primary</span>
<!-- Success Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-emerald-200 dark:border-emerald-800 text-emerald-500 bg-emerald-50 dark:bg-emerald-950">Success</span>
<!-- Warning Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-amber-200 dark:border-amber-800 text-amber-500 bg-amber-50 dark:bg-amber-950">Warning</span>
<!-- Info Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-sky-200 dark:border-sky-800 text-sky-500 bg-sky-50 dark:bg-sky-950">Info</span>
<!-- Danger Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-rose-200 dark:border-rose-800 text-rose-500 bg-rose-50 dark:bg-rose-950">Danger</span>

<!-- Blue Green -->
<span class="inline-flex rounded px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-blue-600 to-green-500">Blue Green</span>
<!-- Blue Pink -->
<span class="inline-flex rounded px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-blue-600 to-pink-500">Blue Pink</span>
<!-- Green Pink -->
<span class="inline-flex rounded px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-green-600 to-pink-500">Green Pink</span>
<!-- Violet Pink -->
<span class="inline-flex rounded px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-violet-600 to-pink-500">Violet Pink</span>
<!-- Yellow Violet -->
<span class="inline-flex rounded px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-yellow-600 to-violet-500">Yellow Violet</span>
<!-- Blue Green Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-blue-600 to-green-500">Blue Green</span>
<!-- Blue Pink Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-blue-600 to-pink-500">Blue Pink</span>
<!-- Green Pink Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-green-600 to-pink-500">Green Pink</span>
<!-- Violet Pink Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-violet-600 to-pink-500">Violet Pink</span>
<!-- Yellow Violet Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/5 font-bold capitalize text-white bg-gradient-to-r from-yellow-600 to-violet-500">Yellow Violet</span>

<!-- Default -->
<span class="inline-flex rounded px-2 text-[11px]/[18px] font-bold capitalize border border-blue-100 dark:border-blue-950 text-blue-500 bg-blue-100 dark:bg-blue-950">Default</span>
<!-- Medium -->
<span class="inline-flex rounded px-2.5 py-0.5 text-[11px]/[18px] font-bold capitalize border border-blue-100 dark:border-blue-950 text-blue-500 bg-blue-100 dark:bg-blue-950">Medium</span>
<!-- Large -->
<span class="inline-flex rounded px-3 py-1 text-[12px]/[18px] font-bold capitalize border border-blue-100 dark:border-blue-950 text-blue-500 bg-blue-100 dark:bg-blue-950">Large</span>
<!-- Default Pill -->
<span class="inline-flex rounded-full px-2 text-[11px]/[18px] font-bold capitalize border border-blue-100 dark:border-blue-950 text-blue-500 bg-blue-100 dark:bg-blue-950">Default</span>
<!-- Medium Pill -->
<span class="inline-flex rounded-full px-2.5 py-0.5 text-[11px]/[18px] font-bold capitalize border border-blue-100 dark:border-blue-950 text-blue-500 bg-blue-100 dark:bg-blue-950">Medium</span>
<!-- Large Pill -->
<span class="inline-flex rounded-full px-3 py-1 text-[12px]/[18px] font-bold capitalize border border-blue-100 dark:border-blue-950 text-blue-500 bg-blue-100 dark:bg-blue-950">Large</span>

<!-- Primary -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800"> Primary </button>
<!-- Secondary -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-slate-600 bg-slate-600 text-white transition-all hover:bg-slate-800 hover:border-slate-800"> Secondary </button>
<!-- Success -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-emerald-600 bg-emerald-600 text-white transition-all hover:bg-emerald-800 hover:border-emerald-800"> Success </button>
<!-- Warning -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-amber-600 bg-amber-600 text-white transition-all hover:bg-amber-800 hover:border-amber-800"> Warning </button>
<!-- Info -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-sky-600 bg-sky-600 text-white transition-all hover:bg-sky-800 hover:border-sky-800"> Info </button>
<!-- Danger -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-rose-600 bg-rose-600 text-white transition-all hover:bg-rose-800 hover:border-rose-800"> Danger </button>
<!-- Primary Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800"> Primary </button>
<!-- Secondary Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-slate-600 bg-slate-600 text-white transition-all hover:bg-slate-800 hover:border-slate-800"> Secondary </button>
<!-- Success Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-emerald-600 bg-emerald-600 text-white transition-all hover:bg-emerald-800 hover:border-emerald-800"> Success </button>
<!-- Warning Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-amber-600 bg-amber-600 text-white transition-all hover:bg-amber-800 hover:border-amber-800"> Warning </button>
<!-- Info Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-sky-600 bg-sky-600 text-white transition-all hover:bg-sky-800 hover:border-sky-800"> Info </button>
<!-- Danger Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-rose-600 bg-rose-600 text-white transition-all hover:bg-rose-800 hover:border-rose-800"> Danger </button>

<!-- Primary -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-100 dark:border-blue-950 bg-blue-100 text-blue-600 dark:bg-blue-950 transition-all hover:bg-blue-600 hover:dark:bg-blue-600 hover:border-blue-600 hover:dark:border-blue-600 hover:text-white"> Primary </button>
<!-- Secondary -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-slate-100 dark:border-slate-950 bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 transition-all hover:bg-slate-600 hover:dark:bg-slate-600 hover:border-slate-600 hover:dark:border-slate-600 hover:text-white hover:dark:text-white"> Secondary </button>
<!-- Success -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-emerald-100 dark:border-emerald-950 bg-emerald-100 text-emerald-600 dark:bg-emerald-950 transition-all hover:bg-emerald-600 hover:dark:bg-emerald-600 hover:border-emerald-600 hover:dark:border-emerald-600 hover:text-white"> Success </button>
<!-- Warning -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-amber-100 dark:border-amber-950 bg-amber-100 text-amber-600 dark:bg-amber-950 transition-all hover:bg-amber-600 hover:dark:bg-amber-600 hover:border-amber-600 hover:dark:border-amber-600 hover:text-white"> Warning </button>
<!-- Info -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-sky-100 dark:border-sky-950 bg-sky-100 text-sky-600 dark:bg-sky-950 transition-all hover:bg-sky-600 hover:dark:bg-sky-600 hover:border-sky-600 hover:dark:border-sky-600 hover:text-white"> Info </button>
<!-- Danger -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-rose-100 dark:border-rose-950 bg-rose-100 text-rose-600 dark:bg-rose-950 transition-all hover:bg-rose-600 hover:dark:bg-rose-600 hover:border-rose-600 hover:dark:border-rose-600 hover:text-white"> Danger </button>
<!-- Primary Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-100 dark:border-blue-950 bg-blue-100 text-blue-600 dark:bg-blue-950 transition-all hover:bg-blue-600 hover:dark:bg-blue-600 hover:border-blue-600 hover:dark:border-blue-600 hover:text-white"> Primary </button>
<!-- Secondary Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-slate-100 dark:border-slate-950 bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300 transition-all hover:bg-slate-600 hover:dark:bg-slate-600 hover:border-slate-600 hover:dark:border-slate-600 hover:text-white hover:dark:text-white"> Secondary </button>
<!-- Success Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-emerald-100 dark:border-emerald-950 bg-emerald-100 text-emerald-600 dark:bg-emerald-950 transition-all hover:bg-emerald-600 hover:dark:bg-emerald-600 hover:border-emerald-600 hover:dark:border-emerald-600 hover:text-white"> Success </button>
<!-- Warning Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-amber-100 dark:border-amber-950 bg-amber-100 text-amber-600 dark:bg-amber-950 transition-all hover:bg-amber-600 hover:dark:bg-amber-600 hover:border-amber-600 hover:dark:border-amber-600 hover:text-white"> Warning </button>
<!-- Info Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-sky-100 dark:border-sky-950 bg-sky-100 text-sky-600 dark:bg-sky-950 transition-all hover:bg-sky-600 hover:dark:bg-sky-600 hover:border-sky-600 hover:dark:border-sky-600 hover:text-white"> Info </button>
<!-- Danger Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-rose-100 dark:border-rose-950 bg-rose-100 text-rose-600 dark:bg-rose-950 transition-all hover:bg-rose-600 hover:dark:bg-rose-600 hover:border-rose-600 hover:dark:border-rose-600 hover:text-white"> Danger </button>

<!-- Primary -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-200 dark:border-blue-900 text-blue-600 transition-all hover:bg-blue-600 hover:dark:bg-blue-600 hover:border-blue-600 hover:dark:border-blue-600 hover:text-white"> Primary </button>
<!-- Secondary -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 transition-all hover:bg-slate-600 hover:dark:bg-slate-600 hover:border-slate-600 hover:dark:border-slate-600 hover:text-white hover:dark:text-white"> Secondary </button>
<!-- Success -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-emerald-200 dark:border-emerald-900 text-emerald-600 transition-all hover:bg-emerald-600 hover:dark:bg-emerald-600 hover:border-emerald-600 hover:dark:border-emerald-600 hover:text-white"> Success </button>
<!-- Warning -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-amber-200 dark:border-amber-900 text-amber-600 transition-all hover:bg-amber-600 hover:dark:bg-amber-600 hover:border-amber-600 hover:dark:border-amber-600 hover:text-white"> Warning </button>
<!-- Info -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-sky-200 dark:border-sky-900 text-sky-600 transition-all hover:bg-sky-600 hover:dark:bg-sky-600 hover:border-sky-600 hover:dark:border-sky-600 hover:text-white"> Info </button>
<!-- Danger -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-rose-200 dark:border-rose-900 text-rose-600 transition-all hover:bg-rose-600 hover:dark:bg-rose-600 hover:border-rose-600 hover:dark:border-rose-600 hover:text-white"> Danger </button>
<!-- Primary Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-200 dark:border-blue-900 text-blue-600 transition-all hover:bg-blue-600 hover:dark:bg-blue-600 hover:border-blue-600 hover:dark:border-blue-600 hover:text-white"> Primary </button>
<!-- Secondary Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 transition-all hover:bg-slate-600 hover:dark:bg-slate-600 hover:border-slate-600 hover:dark:border-slate-600 hover:text-white hover:dark:text-white"> Secondary </button>
<!-- Success Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-emerald-200 dark:border-emerald-900 text-emerald-600 transition-all hover:bg-emerald-600 hover:dark:bg-emerald-600 hover:border-emerald-600 hover:dark:border-emerald-600 hover:text-white"> Success </button>
<!-- Warning Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-amber-200 dark:border-amber-900 text-amber-600 transition-all hover:bg-amber-600 hover:dark:bg-amber-600 hover:border-amber-600 hover:dark:border-amber-600 hover:text-white"> Warning </button>
<!-- Info Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-sky-200 dark:border-sky-900 text-sky-600 transition-all hover:bg-sky-600 hover:dark:bg-sky-600 hover:border-sky-600 hover:dark:border-sky-600 hover:text-white"> Info </button>
<!-- Danger Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-rose-200 dark:border-rose-900 text-rose-600 transition-all hover:bg-rose-600 hover:dark:bg-rose-600 hover:border-rose-600 hover:dark:border-rose-600 hover:text-white"> Danger </button>

<!-- Primary -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-200 dark:border-blue-900 bg-blue-50 text-blue-600 dark:bg-blue-950 transition-all hover:bg-blue-600 hover:dark:bg-blue-600 hover:border-blue-600 hover:dark:border-blue-600 hover:text-white"> Primary </button>
<!-- Secondary -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-slate-200 dark:border-slate-700 bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 transition-all hover:bg-slate-600 hover:dark:bg-slate-600 hover:border-slate-600 hover:dark:border-slate-600 hover:text-white hover:dark:text-white"> Secondary </button>
<!-- Success -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-emerald-200 dark:border-emerald-900 bg-emerald-50 text-emerald-600 dark:bg-emerald-950 transition-all hover:bg-emerald-600 hover:dark:bg-emerald-600 hover:border-emerald-600 hover:dark:border-emerald-600 hover:text-white"> Success </button>
<!-- Warning -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-amber-200 dark:border-amber-900 bg-amber-50 text-amber-600 dark:bg-amber-950 transition-all hover:bg-amber-600 hover:dark:bg-amber-600 hover:border-amber-600 hover:dark:border-amber-600 hover:text-white"> Warning </button>
<!-- Info -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-sky-200 dark:border-sky-900 bg-sky-50 text-sky-600 dark:bg-sky-950 transition-all hover:bg-sky-600 hover:dark:bg-sky-600 hover:border-sky-600 hover:dark:border-sky-600 hover:text-white"> Info </button>
<!-- Danger -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-rose-200 dark:border-rose-900 bg-rose-50 text-rose-600 dark:bg-rose-950 transition-all hover:bg-rose-600 hover:dark:bg-rose-600 hover:border-rose-600 hover:dark:border-rose-600 hover:text-white"> Danger </button>
<!-- Primary Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-200 dark:border-blue-900 bg-blue-50 text-blue-600 dark:bg-blue-950 transition-all hover:bg-blue-600 hover:dark:bg-blue-600 hover:border-blue-600 hover:dark:border-blue-600 hover:text-white"> Primary </button>
<!-- Secondary Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-slate-200 dark:border-slate-700 bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 transition-all hover:bg-slate-600 hover:dark:bg-slate-600 hover:border-slate-600 hover:dark:border-slate-600 hover:text-white hover:dark:text-white"> Secondary </button>
<!-- Success Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-emerald-200 dark:border-emerald-900 bg-emerald-50 text-emerald-600 dark:bg-emerald-950 transition-all hover:bg-emerald-600 hover:dark:bg-emerald-600 hover:border-emerald-600 hover:dark:border-emerald-600 hover:text-white"> Success </button>
<!-- Warning Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-amber-200 dark:border-amber-900 bg-amber-50 text-amber-600 dark:bg-amber-950 transition-all hover:bg-amber-600 hover:dark:bg-amber-600 hover:border-amber-600 hover:dark:border-amber-600 hover:text-white"> Warning </button>
<!-- Info Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-sky-200 dark:border-sky-900 bg-sky-50 text-sky-600 dark:bg-sky-950 transition-all hover:bg-sky-600 hover:dark:bg-sky-600 hover:border-sky-600 hover:dark:border-sky-600 hover:text-white"> Info </button>
<!-- Danger Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-rose-200 dark:border-rose-900 bg-rose-50 text-rose-600 dark:bg-rose-950 transition-all hover:bg-rose-600 hover:dark:bg-rose-600 hover:border-rose-600 hover:dark:border-rose-600 hover:text-white"> Danger </button>

<!-- Tiny -->
<button class="inline-flex items-center justify-center rounded px-2 py-1 gap-2 text-xs font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Tiny </button>
<!-- Small -->
<button class="inline-flex items-center justify-center rounded-md px-3 py-2 gap-3 text-xs font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Small </button>
<!-- Default -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Default </button>
<!-- Large -->
<button class="inline-flex items-center justify-center rounded-md px-6 py-3 gap-3 text-sm/[1.125rem] font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Large </button>
<!-- Giant -->
<button class="inline-flex items-center justify-center rounded-md px-7 py-3 gap-4 text-base font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Giant </button>
<!-- Tiny Pill -->
<button class="inline-flex items-center justify-center rounded-full px-2 py-1 gap-2 text-xs font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Tiny </button>
<!-- Small Pill -->
<button class="inline-flex items-center justify-center rounded-full px-3 py-2 gap-3 text-xs font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Small </button>
<!-- Default Pill -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Default </button>
<!-- Large Pill -->
<button class="inline-flex items-center justify-center rounded-full px-6 py-3 gap-3 text-sm/[1.125rem] font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Large </button>
<!-- Giant Pill -->
<button class="inline-flex items-center justify-center rounded-full px-7 py-3 gap-4 text-base font-medium bg-blue-600 text-white transition-all hover:bg-blue-800"> Giant </button>

<!-- Tiny -->
<button class="inline-flex items-center justify-center rounded px-2 py-1 gap-2 text-xs/[.875rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800"> 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
    </svg><!-- eye - outline - heroicons  -->
    <span>Tiny</span>
</button>
<!-- Small -->
<button class="inline-flex items-center justify-center rounded-md px-3 py-2 gap-3 text-xs/[.875rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
    </svg><!-- arrow-path - outline - heroicons  -->
    <span>Small</span>
</button>
<!-- Default -->
<button class="inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
    </svg><!-- adjustments-horizontal - outline - heroicons  -->
    <span>Default</span> 
    </button>
<!-- Large -->
<button class="inline-flex items-center justify-center rounded-md px-6 py-3 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800"> 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
    </svg><!-- clipboard-document-list - outline - heroicons  -->
    <span>Large</span>
</button>
<!-- Giant -->
<button class="inline-flex items-center justify-center rounded-md px-7 py-3 gap-3 text-base/[1.375rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800"> 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
    </svg><!-- chat-bubble-left-right - outline - heroicons  -->
    <span>Giant</span>
</button>
<!-- Tiny -->
<button class="inline-flex items-center justify-center rounded-full px-2 py-1 gap-2 text-xs/[.875rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800"> 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
    </svg><!-- eye - outline - heroicons  -->
    <span>Tiny</span>
</button>
<!-- Small -->
<button class="inline-flex items-center justify-center rounded-full px-3 py-2 gap-3 text-xs/[.875rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
    </svg><!-- arrow-path - outline - heroicons  -->
    <span>Small</span>
</button>
<!-- Default -->
<button class="inline-flex items-center justify-center rounded-full px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
    </svg><!-- adjustments-horizontal - outline - heroicons  -->
    <span>Default</span> 
    </button>
<!-- Large -->
<button class="inline-flex items-center justify-center rounded-full px-6 py-3 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800"> 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
    </svg><!-- clipboard-document-list - outline - heroicons  -->
    <span>Large</span>
</button>
<!-- Giant -->
<button class="inline-flex items-center justify-center rounded-full px-7 py-3 gap-3 text-base/[1.375rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800"> 
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
    </svg><!-- chat-bubble-left-right - outline - heroicons  -->
    <span>Giant</span>
</button>

<!-- Tiny -->
<button class="inline-flex rounded h-6 w-6 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
    </svg><!-- eye - outline - heroicons  -->
</button>
<!-- Small -->
<button class="inline-flex rounded-md h-8 w-8 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
    </svg><!-- arrow-path - outline - heroicons  -->
</button>
<!-- Default -->
<button class="inline-flex rounded-md h-9 w-9 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
    </svg><!-- adjustments-horizontal - outline - heroicons  -->
</button>
<!-- Large -->
<button class="inline-flex rounded-md h-11 w-11 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
    </svg><!-- clipboard-document-list - outline - heroicons  -->
</button>
<!-- Giant -->
<button class="inline-flex rounded-md h-12 w-12 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
    </svg><!-- chat-bubble-left-right - outline - heroicons  -->
</button>
<!-- Tiny Pill -->
<button class="inline-flex rounded-full h-6 w-6 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
    </svg><!-- eye - outline - heroicons  -->
</button>
<!-- Small Pill -->
<button class="inline-flex rounded-full h-8 w-8 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
    </svg><!-- arrow-path - outline - heroicons  -->
</button>
<!-- Default Pill -->
<button class="inline-flex rounded-full h-9 w-9 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
    </svg><!-- adjustments-horizontal - outline - heroicons  -->
</button>
<!-- Large Pill -->
<button class="inline-flex rounded-full h-11 w-11 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
    </svg><!-- clipboard-document-list - outline - heroicons  -->
</button>
<!-- Giant Pill -->
<button class="inline-flex rounded-full h-12 w-12 items-center justify-center text-sm border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" />
    </svg><!-- chat-bubble-left-right - outline - heroicons  -->
</button>

<!-- Dropdown -->
<div class="relative inline-flex  has-[.show]:z-50">
    <button data-offset="0,8" data-placement="bottom-start" data-rtl-placement="bottom-end" class="dropdown-toggle peer inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
        Dropdown
    </button>
    <div class="dropdown-menu invisible absolute end-0 top-10 w-48 opacity-0 transition-all duration-100 ease-out peer-[.show]:visible peer-[.show_.dropdown-wrap]:scale-100 peer-[.show]:opacity-100">
        <div class="dropdown-wrap ransition-all origin-top-right scale-90 rounded-lg border border-slate-200 bg-white shadow-sm duration-100 ease-out dark:border-slate-800 dark:bg-slate-950">
            <ul class="py-2">
                <li>
                    <a href="./admin/dashboard.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                        </svg><!-- squares-plus - outline - heroicons  -->
                        <span>Admin</span>
                    </a>
                </li>
                <li>
                    <a href="./app/profile.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                        </svg ><!-- user - outline - heroicons  -->
                        <span>Profile</span>
                    </a>
                </li>
                <li>
                    <a href="./app/packages.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
                        </svg><!-- rocket-launch - outline - heroicons  -->
                        <span>Upgrade</span>
                    </a>
                </li>
                <li>
                    <a href="./login.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                        </svg><!-- power - outline - heroicons  -->
                        <span>Logout</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Dropup -->
<div class="relative inline-flex  has-[.show]:z-50">
    <button data-offset="0,8" data-placement="top-start" data-rtl-placement="top-end" class="dropdown-toggle peer inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
        DropUp
    </button>
    <div class="dropdown-menu invisible absolute end-0 top-10 w-48 opacity-0 transition-all duration-100 ease-out peer-[.show]:visible peer-[.show_.dropdown-wrap]:scale-100 peer-[.show]:opacity-100">
        <div class="dropdown-wrap ransition-all origin-top-right scale-90 rounded-lg border border-slate-200 bg-white shadow-sm duration-100 ease-out dark:border-slate-800 dark:bg-slate-950">
            <ul class="py-2">
                <li>
                    <a href="./admin/dashboard.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                        </svg><!-- squares-plus - outline - heroicons  -->
                        <span>Admin</span>
                    </a>
                </li>
                <li>
                    <a href="./app/profile.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                        </svg ><!-- user - outline - heroicons  -->
                        <span>Profile</span>
                    </a>
                </li>
                <li>
                    <a href="./app/packages.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
                        </svg><!-- rocket-launch - outline - heroicons  -->
                        <span>Upgrade</span>
                    </a>
                </li>
                <li>
                    <a href="./login.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                        </svg><!-- power - outline - heroicons  -->
                        <span>Logout</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Dropend -->
<div class="relative inline-flex  has-[.show]:z-50">
    <button data-offset="0,8" data-placement="right-start" data-rtl-placement="right-end" class="dropdown-toggle peer inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
        DropEnd
    </button>
    <div class="dropdown-menu invisible absolute end-0 top-10 w-48 opacity-0 transition-all duration-100 ease-out peer-[.show]:visible peer-[.show_.dropdown-wrap]:scale-100 peer-[.show]:opacity-100">
        <div class="dropdown-wrap ransition-all origin-top-right scale-90 rounded-lg border border-slate-200 bg-white shadow-sm duration-100 ease-out dark:border-slate-800 dark:bg-slate-950">
            <ul class="py-2">
                <li>
                    <a href="./admin/dashboard.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                        </svg><!-- squares-plus - outline - heroicons  -->
                        <span>Admin</span>
                    </a>
                </li>
                <li>
                    <a href="./app/profile.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                        </svg ><!-- user - outline - heroicons  -->
                        <span>Profile</span>
                    </a>
                </li>
                <li>
                    <a href="./app/packages.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
                        </svg><!-- rocket-launch - outline - heroicons  -->
                        <span>Upgrade</span>
                    </a>
                </li>
                <li>
                    <a href="./login.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                        </svg><!-- power - outline - heroicons  -->
                        <span>Logout</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- Dropstart -->
<div class="relative inline-flex  has-[.show]:z-50">
    <button data-offset="0,8" data-placement="left-start" data-rtl-placement="left-end" class="dropdown-toggle peer inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
        DropStart
    </button>
    <div class="dropdown-menu invisible absolute end-0 top-10 w-48 opacity-0 transition-all duration-100 ease-out peer-[.show]:visible peer-[.show_.dropdown-wrap]:scale-100 peer-[.show]:opacity-100">
        <div class="dropdown-wrap ransition-all origin-top-left scale-90 rounded-lg border border-slate-200 bg-white shadow-sm duration-100 ease-out dark:border-slate-800 dark:bg-slate-950">
            <ul class="py-2">
                <li>
                    <a href="./admin/dashboard.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
                        </svg><!-- squares-plus - outline - heroicons  -->
                        <span>Admin</span>
                    </a>
                </li>
                <li>
                    <a href="./app/profile.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                        </svg ><!-- user - outline - heroicons  -->
                        <span>Profile</span>
                    </a>
                </li>
                <li>
                    <a href="./app/packages.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
                        </svg><!-- rocket-launch - outline - heroicons  -->
                        <span>Upgrade</span>
                    </a>
                </li>
                <li>
                    <a href="./login.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                        </svg><!-- power - outline - heroicons  -->
                        <span>Logout</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- User Dropdown -->
<div class="dropdown-wrap rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950">
    <div class="flex items-center p-4">
        <div class="inline-flex h-10 w-10 flex-shrink-0 overflow-hidden rounded-full outline outline-2 outline-offset-2 outline-slate-300 dark:outline-slate-700">
        <img src="images/avatar/a.jpg" alt="" />
        </div>
        <div class="ms-4">
        <h6 class="-mt-0.5 text-xs font-bold text-slate-700 dark:text-white">
            Phillip Burke
        </h6>
        <span class="rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-bold text-blue-500 dark:bg-blue-950">
            Balance $18.89
        </span>
        </div>
    </div>
    <ul class="border-t border-slate-200 py-2 dark:border-slate-800">
        <li>
        <a href="./admin/dashboard.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z" />
            </svg><!-- squares-plus - outline - heroicons  -->
            <span>Admin</span>
        </a>
        </li>
        <li>
        <a href="./app/profile.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
            </svg ><!-- user - outline - heroicons  -->
            <span>Profile</span>
        </a>
        </li>
        <li>
        <a href="./app/packages.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
            </svg><!-- rocket-launch - outline - heroicons  -->
            <span>Upgrade</span>
        </a>
        </li>
        <li>
        <a href="./login.html" class="flex px-4 py-2 text-xs font-bold text-slate-500 transition-all hover:text-blue-600 dark:text-slate-400 hover:dark:text-blue-600">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="me-2 w-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
            </svg><!-- power - outline - heroicons  -->
            <span>Logout</span>
        </a>
        </li>
    </ul>
</div>
<!-- Notification Dropdown -->
<div class="dropdown-wrap rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950">
    <div class="flex items-center border-b border-slate-200 px-5 py-3 dark:border-slate-800">
        <h5 class="text-md inline-flex items-center font-bold text-slate-600 dark:text-slate-100">
            <span>Notifications </span>
            <span class="ms-2 inline-flex rounded-full text-xs font-bold text-blue-500">( 6 )</span>
        </h5>
    </div>
    <div class="flex flex-col py-3">
        <div class="flex items-start px-5 py-2">
            <div class="inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-slate-200 text-xs font-bold text-slate-600 dark:bg-slate-800 dark:text-slate-100">
                <span>MG</span>
            </div>
            <div class="py-0.5 ps-3">
                <h6 class="text-sm text-slate-500 dark:text-slate-200">
                    <strong class="text-slate-600 dark:text-slate-100">Marie George</strong>
                    Registered
                </h6>
                <div class="mt-0.5 text-xs text-slate-400 dark:text-slate-300">
                    10 Minutes Ago
                </div>
            </div>
        </div>
        <div class="flex items-start px-5 py-2">
            <div class="inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-slate-200 text-xs font-bold text-slate-600 dark:bg-slate-800 dark:text-slate-100">
                <span>RS</span>
            </div>
            <div class="py-0.5 ps-3">
                <h6 class="text-sm text-slate-500 dark:text-slate-200">
                    <strong class="text-slate-600 dark:text-slate-100">Romy Schulte</strong>
                    Registered
                </h6>
                <div class="mt-0.5 text-xs text-slate-400 dark:text-slate-300">
                    02 Hours Ago
                </div>
            </div>
        </div>
        <div class="flex items-start px-5 py-2">
            <div class="inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-slate-200 text-xs font-bold text-slate-600 dark:bg-slate-800 dark:text-slate-100">
                <span>MW</span>
            </div>
            <div class="py-0.5 ps-3">
                <h6 class="text-sm text-slate-500 dark:text-slate-200">
                    <strong class="text-slate-600 dark:text-slate-100">Maxim Werner</strong>
                    Registered
                </h6>
                <div class="mt-0.5 text-xs text-slate-400 dark:text-slate-300">
                    2 Weeks Ago
                </div>
            </div>
        </div>
    </div>
</div>

<!-- text input element -->
<div class="py-2">
    <label for="inputElement" class="mb-2 inline-flex cursor-pointer text-sm font-bold text-slate-600 dark:text-slate-200">Input Label</label>
    <div class="relative isolate flex w-full">
        <input value="Input Value" id="inputElement" class="z-10 w-full rounded-md border-slate-200 bg-white py-2 text-sm/[1.125rem] text-slate-600 placeholder:text-slate-400 focus:border-slate-200 focus:shadow-none focus:outline-none disabled:bg-slate-100 disabled:text-slate-400 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200 placeholder:dark:text-slate-500"/>
    </div>
</div>
<!-- select input element -->
<div class="py-2">
    <label for="SelectElement" class="mb-2 inline-flex cursor-pointer text-sm font-bold text-slate-600 dark:text-slate-200">Select Label</label>
    <select id="SelectElement" class="z-10 w-full rounded-md border-slate-200 bg-white py-2 text-sm text-slate-600 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200">
        <option>Select option One</option>
        <option>Select option Two</option>
        <option>Select option Three</option>
    </select>
</div>
<!-- radio input element -->
<div class="py-2">
    <label class="mb-2 inline-flex cursor-pointer text-sm font-bold text-slate-600 dark:text-slate-200">Radio Input</label>
    <div class="-mx-2 -my-1 flex flex-wrap">
        <div class="px-2 py-1">
            <div class="relative flex">
                <input class="h-5 w-5 rounded-full border-2 border-slate-300 bg-white p-1 text-sm dark:border-slate-700 dark:bg-slate-950 checked:dark:border-blue-600 checked:dark:bg-blue-600 focus:dark:ring-offset-slate-950" type="radio" id="optionOneRadio" name="RadioInput"/>
                <label class="inline-flex cursor-pointer ps-3 text-sm font-medium text-slate-600 dark:text-slate-200" for="optionOneRadio"> Option One </label>
            </div>
        </div>
        <div class="px-2 py-1">
            <div class="relative flex">
                <input class="h-5 w-5 rounded-full border-2 border-slate-300 bg-white p-1 text-sm dark:border-slate-700 dark:bg-slate-950 checked:dark:border-blue-600 checked:dark:bg-blue-600 focus:dark:ring-offset-slate-950" type="radio" id="optionTwoRadio" name="RadioInput"/>
                <label class="inline-flex cursor-pointer ps-3 text-sm font-medium text-slate-600 dark:text-slate-200" for="optionTwoRadio"> Option Two </label>
            </div>
        </div>
        <div class="px-2 py-1">
            <div class="relative flex">
                <input class="h-5 w-5 rounded-full border-2 border-slate-300 bg-white p-1 text-sm dark:border-slate-700 dark:bg-slate-950 checked:dark:border-blue-600 checked:dark:bg-blue-600 focus:dark:ring-offset-slate-950" type="radio" id="optionThreeRadio" name="RadioInput" checked/>
                <label class="inline-flex cursor-pointer ps-3 text-sm font-medium text-slate-600 dark:text-slate-200" for="optionThreeRadio"> Option Three </label>
            </div>
        </div>
    </div>
</div>
<!-- checkbox input element -->
<div class="py-2">
    <label class="mb-2 inline-flex cursor-pointer text-sm font-bold text-slate-600 dark:text-slate-200">Checkbox Input</label>
    <div class="-mx-2 -my-1 flex flex-wrap">
        <div class="px-2 py-1">
            <div class="relative flex">
                <input class="h-5 w-5 rounded border-2 border-slate-300 bg-white p-1 text-sm dark:border-slate-700 dark:bg-slate-950 checked:dark:border-blue-600 checked:dark:bg-blue-600 focus:dark:ring-offset-slate-950" type="checkbox" id="optionOneCheckbox" name="CheckboxInput"/>
                <label class="inline-flex cursor-pointer ps-3 text-sm font-medium text-slate-600 dark:text-slate-200" for="optionOneCheckbox"> Option One </label>
            </div>
        </div>
        <div class="px-2 py-1">
            <div class="relative flex">
                <input class="h-5 w-5 rounded border-2 border-slate-300 bg-white p-1 text-sm dark:border-slate-700 dark:bg-slate-950 checked:dark:border-blue-600 checked:dark:bg-blue-600 focus:dark:ring-offset-slate-950" type="checkbox" id="optionTwoCheckbox" name="CheckboxInput"/>
                <label class="inline-flex cursor-pointer ps-3 text-sm font-medium text-slate-600 dark:text-slate-200" for="optionTwoCheckbox"> Option Two </label>
            </div>
        </div>
        <div class="px-2 py-1">
            <div class="relative flex">
                <input class="h-5 w-5 rounded border-2 border-slate-300 bg-white p-1 text-sm dark:border-slate-700 dark:bg-slate-950 checked:dark:border-blue-600 checked:dark:bg-blue-600 focus:dark:ring-offset-slate-950" type="checkbox" id="optionThreeCheckbox" name="CheckboxInput" checked/>
                <label class="inline-flex cursor-pointer ps-3 text-sm font-medium text-slate-600 dark:text-slate-200" for="optionThreeCheckbox"> Option Three </label>
            </div>
        </div>
    </div>
</div>
<!-- switch input element -->
<div class="py-2">
    <label class="mb-2 inline-flex cursor-pointer text-sm font-bold text-slate-600 dark:text-slate-200">Switch Input</label>
    <div class="-mx-2 -my-1 flex flex-wrap">
        <div class="px-2 py-1">
            <div class="relative flex">
                <input class="h-5 w-9 cursor-pointer rounded-full border-2 border-slate-200 bg-slate-200 p-1 after:absolute after:start-1 after:top-1 after:h-3 after:w-3 after:rounded-full after:bg-white after:transition-[all] checked:bg-none checked:after:start-5 focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-slate-800 dark:bg-slate-700 after:dark:bg-slate-950 checked:dark:border-blue-600 checked:dark:bg-blue-600" type="checkbox" id="optionOneSwitch" checked/>
                <label class="cursor-pointer ps-3" for="optionOneSwitch">
                    <span class="block text-sm font-medium text-slate-600 dark:text-slate-200">
                    Option One
                    </span>
                </label>
            </div>
        </div>
        <div class="px-2 py-1">
            <div class="relative flex">
                <input class="h-5 w-9 cursor-pointer rounded-full border-2 border-slate-200 bg-slate-200 p-1 after:absolute after:start-1 after:top-1 after:h-3 after:w-3 after:rounded-full after:bg-white after:transition-[all] checked:bg-none checked:after:start-5 focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-slate-800 dark:bg-slate-700 after:dark:bg-slate-950 checked:dark:border-blue-600 checked:dark:bg-blue-600" type="checkbox" id="optionTwoSwitch"/>
                <label class="cursor-pointer ps-3" for="optionTwoSwitch">
                    <span class="block text-sm font-medium text-slate-600 dark:text-slate-200">
                    Option Two
                    </span>
                </label>
            </div>
        </div>
        <div class="px-2 py-1">
            <div class="relative flex">
                <input class="h-5 w-9 cursor-pointer rounded-full border-2 border-slate-200 bg-slate-200 p-1 after:absolute after:start-1 after:top-1 after:h-3 after:w-3 after:rounded-full after:bg-white after:transition-[all] checked:bg-none checked:after:start-5 focus:ring-0 focus:ring-offset-0 focus-visible:outline-none dark:border-slate-800 dark:bg-slate-700 after:dark:bg-slate-950 checked:dark:border-blue-600 checked:dark:bg-blue-600" type="checkbox" id="optionThreeSwitch"/>
                <label class="cursor-pointer ps-3" for="optionThreeSwitch">
                    <span class="block text-sm font-medium text-slate-600 dark:text-slate-200">
                    Option Three
                    </span>
                </label>
            </div>
        </div>
    </div>
</div>
<!-- textarea element -->
<div class="py-2">
    <label for="textareaElement" class="mb-2 inline-flex cursor-pointer text-sm font-bold text-slate-600 dark:text-slate-200">Textarea Label</label>
    <div class="relative flex">
        <textarea class="mb-0 w-full rounded-md border-slate-200 bg-white py-2 text-sm text-slate-600 focus:border-slate-200 focus:shadow-none focus:outline-none dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200" id="textareaElement" rows="6">Textarea Value</textarea>
    </div>
</div>

<!-- custom select with choice.js -->
<div class="py-2">
    <label for="ChoiceSelectElement" class="mb-2 inline-flex cursor-pointer text-sm font-bold text-slate-600 dark:text-slate-200">Choice.js Select</label>
    <select id="ChoiceSelectElement" class="js-select z-10 w-full rounded-md border-slate-200 bg-white py-2 text-sm text-slate-600 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200">
        <option>Select option One</option>
        <option>Select option Two</option>
        <option>Select option Three</option>
    </select>
</div>
<!-- custom upload with dropzone -->
<div class="py-2">
    <label class="mb-2 inline-flex cursor-pointer text-sm font-bold text-slate-600 dark:text-slate-200">Dropzone Upload</label>
    <div class="js-upload" id="siteLogoDarkTheme">
        <div class="dz-message" data-dz-message>
            <div class="flex flex-col items-center">
                <p class="mb-3 text-center text-sm font-medium text-slate-500 dark:text-slate-300">
                    Drag &amp; Drop your files or
                </p>
                <div class="inline-flex cursor-pointer rounded bg-blue-600 px-2 py-1 text-sm font-medium text-white">
                    Browse
                </div>
            </div>
        </div>
    </div>
</div>
<!-- auto input change for 2fa -->
<div class="py-2">
    <label for="passwordCR1" class="mb-2 inline-flex w-full cursor-pointer items-center justify-between text-sm font-bold text-slate-600 dark:text-slate-200">
        Auto Change Input
    </label>
    <div class="js-auto-input-change flex gap-x-3 max-w-72 w-full">
        <input class="z-10 w-full rounded-md border-slate-200 bg-white py-2 text-center text-sm text-slate-600 placeholder:text-slate-400 focus:border-slate-200 focus:shadow-none focus:outline-none disabled:bg-slate-100 disabled:text-slate-400 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200 focus:dark:border-slate-800 disabled:dark:bg-slate-900" id="passwordCR1" type="password" maxlength="1"/>
        <input class="z-10 w-full rounded-md border-slate-200 bg-white py-2 text-center text-sm text-slate-600 placeholder:text-slate-400 focus:border-slate-200 focus:shadow-none focus:outline-none disabled:bg-slate-100 disabled:text-slate-400 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200 focus:dark:border-slate-800 disabled:dark:bg-slate-900" id="passwordCR2" type="password" maxlength="1"/>
        <input class="z-10 w-full rounded-md border-slate-200 bg-white py-2 text-center text-sm text-slate-600 placeholder:text-slate-400 focus:border-slate-200 focus:shadow-none focus:outline-none disabled:bg-slate-100 disabled:text-slate-400 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200 focus:dark:border-slate-800 disabled:dark:bg-slate-900" id="passwordCR3" type="password" maxlength="1"/>
        <input class="z-10 w-full rounded-md border-slate-200 bg-white py-2 text-center text-sm text-slate-600 placeholder:text-slate-400 focus:border-slate-200 focus:shadow-none focus:outline-none disabled:bg-slate-100 disabled:text-slate-400 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200 focus:dark:border-slate-800 disabled:dark:bg-slate-900" id="passwordCR4" type="password" maxlength="1"/>
        <input class="z-10 w-full rounded-md border-slate-200 bg-white py-2 text-center text-sm text-slate-600 placeholder:text-slate-400 focus:border-slate-200 focus:shadow-none focus:outline-none disabled:bg-slate-100 disabled:text-slate-400 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200 focus:dark:border-slate-800 disabled:dark:bg-slate-900" id="passwordCR5" type="password" maxlength="1"/>
        <input class="z-10 w-full rounded-md border-slate-200 bg-white py-2 text-center text-sm text-slate-600 placeholder:text-slate-400 focus:border-slate-200 focus:shadow-none focus:outline-none disabled:bg-slate-100 disabled:text-slate-400 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-200 focus:dark:border-slate-800 disabled:dark:bg-slate-900" id="passwordCR6" type="password" maxlength="1"/>
    </div>
</div>
<!-- custom styled checkbox -->
<div class="py-2">
    <label class="mb-4 inline-flex cursor-pointer text-sm font-bold text-slate-600 dark:text-slate-200">
        Custom Check
    </label>
    <div class="grid grid-cols-3 gap-3 sm:grid-cols-5">
        <label class="relative flex h-full cursor-pointer flex-col has-[:checked]:cursor-default" for="image-style-photo">
            <input class="peer absolute h-0 w-0 opacity-0" type="radio" name="imageStyle" id="image-style-photo" value="Photo"/>
            <img alt="" class="flex-shrink-0 rounded-t-md" src="images/generated/a-childrens-school-made-of-classrooms-made-of-geodesic-domes-situated-on-an-old-golf-course-in-hawaii.jpg"/>
            <span class="flex flex-grow items-center justify-center rounded-b-md border border-t-0 border-slate-200 p-2 text-center text-xs font-bold text-slate-600 transition-all duration-500 peer-checked:border-blue-200 peer-checked:bg-blue-100 peer-checked:text-slate-700 dark:border-slate-800 dark:text-slate-200 peer-checked:dark:border-blue-900 peer-checked:dark:bg-blue-950 peer-checked:dark:text-white"> Photo</span>
        </label>
        <label class="relative flex h-full cursor-pointer flex-col has-[:checked]:cursor-default" for="image-style-concept-art">
            <input class="peer absolute h-0 w-0 opacity-0" type="radio" name="imageStyle" id="image-style-concept-art" value="Concept Art" checked />
            <img alt="" class="flex-shrink-0 rounded-t-md" src="images/generated/baby-bandsaurus-drinking-coffee-with-baby-bottle.jpg"/>
            <span class="flex flex-grow items-center justify-center rounded-b-md border border-t-0 border-slate-200 p-2 text-center text-xs font-bold text-slate-600 transition-all duration-500 peer-checked:border-blue-200 peer-checked:bg-blue-100 peer-checked:text-slate-700 dark:border-slate-800 dark:text-slate-200 peer-checked:dark:border-blue-900 peer-checked:dark:bg-blue-950 peer-checked:dark:text-white"> Concept Art</span>
        </label>
        <label class="relative flex h-full cursor-pointer flex-col has-[:checked]:cursor-default" for="image-style-illustration">
            <input class="peer absolute h-0 w-0 opacity-0" type="radio" name="imageStyle" id="image-style-illustration" value="Illustration" checked />
            <img alt="" class="flex-shrink-0 rounded-t-md" src="images/generated/happy-ice-cream-sining.jpg"/>
            <span class="flex flex-grow items-center justify-center rounded-b-md border border-t-0 border-slate-200 p-2 text-center text-xs font-bold text-slate-600 transition-all duration-500 peer-checked:border-blue-200 peer-checked:bg-blue-100 peer-checked:text-slate-700 dark:border-slate-800 dark:text-slate-200 peer-checked:dark:border-blue-900 peer-checked:dark:bg-blue-950 peer-checked:dark:text-white"> Illustration</span>
        </label>
        <label class="relative flex h-full cursor-pointer flex-col has-[:checked]:cursor-default" for="image-style-fantasy">
            <input class="peer absolute h-0 w-0 opacity-0" type="radio" name="imageStyle" id="image-style-fantasy" value="Fantasy" checked />
            <img alt="" class="flex-shrink-0 rounded-t-md" src="images/generated/melted-candle-looks-like-a-fried-chicken-burger-in-pastel-colours.jpg"/>
            <span class="flex flex-grow items-center justify-center rounded-b-md border border-t-0 border-slate-200 p-2 text-center text-xs font-bold text-slate-600 transition-all duration-500 peer-checked:border-blue-200 peer-checked:bg-blue-100 peer-checked:text-slate-700 dark:border-slate-800 dark:text-slate-200 peer-checked:dark:border-blue-900 peer-checked:dark:bg-blue-950 peer-checked:dark:text-white"> Fantasy</span>
        </label>
        <label class="relative flex h-full cursor-pointer flex-col has-[:checked]:cursor-default" for="image-style-isometric">
            <input class="peer absolute h-0 w-0 opacity-0" type="radio" name="imageStyle" id="image-style-isometric" value="Isometric" checked />
            <img alt="" class="flex-shrink-0 rounded-t-md" src="images/generated/hype-realistic-modern-bed-with-sandy-colors-white-background-and-cinematic-lights.jpg"/>
            <span class="flex flex-grow items-center justify-center rounded-b-md border border-t-0 border-slate-200 p-2 text-center text-xs font-bold text-slate-600 transition-all duration-500 peer-checked:border-blue-200 peer-checked:bg-blue-100 peer-checked:text-slate-700 dark:border-slate-800 dark:text-slate-200 peer-checked:dark:border-blue-900 peer-checked:dark:bg-blue-950 peer-checked:dark:text-white"> Isometric</span>
        </label>
        
    </div>
</div>

<div class="max-w-sm mt-2 border border-l-slate-200 dark:border-slate-700 p-3 rounded-lg">
    <div class="js-lightbox-gallery grid grid-flow-dense grid-cols-2 gap-2">
        
        <div class="relative group">
            <img class="rounded-lg" src="images/generated/a-modern-and-innovative-commercial-booth-in-the-middle-of-the-desert.jpg" alt="">
            <div class="absolute bottom-4 end-4 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 flex flex-col gap-px rounded-md bg-slate-200 dark:bg-slate-700 opacity-0 group-hover:opacity-100 transition-all duration-300">
                <a href="images/generated/a-modern-and-innovative-commercial-booth-in-the-middle-of-the-desert.jpg" data-pswp-width="1000" data-pswp-height="1000" class="js-lightbox-toggle h-8 w-8 flex items-center justify-center first:rounded-t-md last:rounded-b-md bg-white dark:bg-slate-900 hover:dark:bg-green-600 hover:bg-green-500 text-slate-600 dark:text-white hover:text-white transition-all" >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg> <!-- eye - outline - heroicons  -->
                </button>
                <a class="h-8 w-8 flex items-center justify-center first:rounded-t-md last:rounded-b-md bg-white dark:bg-slate-900 hover:dark:bg-green-600 hover:bg-green-500 text-slate-600 dark:text-white hover:text-white transition-all" href="images/generated/a-modern-and-innovative-commercial-booth-in-the-middle-of-the-desert.jpg" download>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                    </svg> <!-- arrow-down-tray - outline - heroicons  -->
                </a>
            </div>
        </div>
        
        <div class="relative group">
            <img class="rounded-lg" src="images/generated/a-teeny-tiny-cute-redheaded-gremlin-girl-reaching-her-hands-into-the-air-saying-because-I-love-you.jpg" alt="">
            <div class="absolute bottom-4 end-4 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 flex flex-col gap-px rounded-md bg-slate-200 dark:bg-slate-700 opacity-0 group-hover:opacity-100 transition-all duration-300">
                <a href="images/generated/a-teeny-tiny-cute-redheaded-gremlin-girl-reaching-her-hands-into-the-air-saying-because-I-love-you.jpg" data-pswp-width="1000" data-pswp-height="1000" class="js-lightbox-toggle h-8 w-8 flex items-center justify-center first:rounded-t-md last:rounded-b-md bg-white dark:bg-slate-900 hover:dark:bg-green-600 hover:bg-green-500 text-slate-600 dark:text-white hover:text-white transition-all" >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg> <!-- eye - outline - heroicons  -->
                </button>
                <a class="h-8 w-8 flex items-center justify-center first:rounded-t-md last:rounded-b-md bg-white dark:bg-slate-900 hover:dark:bg-green-600 hover:bg-green-500 text-slate-600 dark:text-white hover:text-white transition-all" href="images/generated/a-teeny-tiny-cute-redheaded-gremlin-girl-reaching-her-hands-into-the-air-saying-because-I-love-you.jpg" download>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                    </svg> <!-- arrow-down-tray - outline - heroicons  -->
                </a>
            </div>
        </div>
        
        <div class="relative group">
            <img class="rounded-lg" src="images/generated/cute-cat-as-calculator-macaroon-as-the-buttons-of-the-calculator-ribbon-happy-colors2.jpg" alt="">
            <div class="absolute bottom-4 end-4 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 flex flex-col gap-px rounded-md bg-slate-200 dark:bg-slate-700 opacity-0 group-hover:opacity-100 transition-all duration-300">
                <a href="images/generated/cute-cat-as-calculator-macaroon-as-the-buttons-of-the-calculator-ribbon-happy-colors2.jpg" data-pswp-width="1000" data-pswp-height="1000" class="js-lightbox-toggle h-8 w-8 flex items-center justify-center first:rounded-t-md last:rounded-b-md bg-white dark:bg-slate-900 hover:dark:bg-green-600 hover:bg-green-500 text-slate-600 dark:text-white hover:text-white transition-all" >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg> <!-- eye - outline - heroicons  -->
                </button>
                <a class="h-8 w-8 flex items-center justify-center first:rounded-t-md last:rounded-b-md bg-white dark:bg-slate-900 hover:dark:bg-green-600 hover:bg-green-500 text-slate-600 dark:text-white hover:text-white transition-all" href="images/generated/cute-cat-as-calculator-macaroon-as-the-buttons-of-the-calculator-ribbon-happy-colors2.jpg" download>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                    </svg> <!-- arrow-down-tray - outline - heroicons  -->
                </a>
            </div>
        </div>
        
        <div class="relative group">
            <img class="rounded-lg" src="images/generated/cute-cat-as-calculator-macaroon-as-the-buttons-of-the-calculator-ribbon-happy-colors.jpg" alt="">
            <div class="absolute bottom-4 end-4 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 flex flex-col gap-px rounded-md bg-slate-200 dark:bg-slate-700 opacity-0 group-hover:opacity-100 transition-all duration-300">
                <a href="images/generated/cute-cat-as-calculator-macaroon-as-the-buttons-of-the-calculator-ribbon-happy-colors.jpg" data-pswp-width="1000" data-pswp-height="1000" class="js-lightbox-toggle h-8 w-8 flex items-center justify-center first:rounded-t-md last:rounded-b-md bg-white dark:bg-slate-900 hover:dark:bg-green-600 hover:bg-green-500 text-slate-600 dark:text-white hover:text-white transition-all" >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                    </svg> <!-- eye - outline - heroicons  -->
                </button>
                <a class="h-8 w-8 flex items-center justify-center first:rounded-t-md last:rounded-b-md bg-white dark:bg-slate-900 hover:dark:bg-green-600 hover:bg-green-500 text-slate-600 dark:text-white hover:text-white transition-all" href="images/generated/cute-cat-as-calculator-macaroon-as-the-buttons-of-the-calculator-ribbon-happy-colors.jpg" download>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                    </svg> <!-- arrow-down-tray - outline - heroicons  -->
                </a>
            </div>
        </div>
        
    </div>
</div>

<!-- modal trigger -->
<button data-target="#ModalId" class="modal-toggle relative inline-flex items-center justify-center gap-3 rounded-md bg-blue-600 px-5 py-2 text-sm font-medium text-white transition-all hover:bg-blue-800">Open Modal</button>
<!-- modal content -->
<div id="ModalId" class="modal group fixed inset-0 flex items-center py-5 px-3 transition-all duration-500 opacity-0 invisible [&.show]:visible [&.show]:opacity-100 z-[5000]">
    <div class="modal-overlay modal-close absolute inset-0 bg-slate-700 bg-opacity-50"></div><!-- modal overlay -->
    <div class="modal-body bg-white dark:bg-gray-950 rounded-md w-full sm:w-[520px] mx-auto transition-transform delay-500 group-[.show]:delay-0 group-[.show]:duration-300 ease-out -translate-y-[30px] group-[.show]:translate-y-0">
        <button class="modal-close absolute top-0 end-0 translate-x-1/2 -translate-y-1/2 h-8 w-8 flex justify-center items-center rounded-full bg-white dark:bg-slate-950 text-slate-600 dark:text-white border border-slate-200 dark:border-slate-700 shadow">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>                          
        </button>
        <div class="px-5 sm:px-6 py-5 sm:py-6">
            <p class="text-slate-500 dark:text-slate-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem similique earum necessitatibus nesciunt! Quia id expedita asperiores voluptatem odit quis fugit sapiente assumenda sunt voluptatibus atque facere autem, omnis explicabo.</p>
        </div>
    </div>
</div>

<div class="w-full rounded-lg border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
    <ul class="tab-nav flex border-b border-slate-200 px-3 dark:border-slate-800">
        <li class="tab-item">
            <a href="#" data-target="#OverviewS1" class="tab-toggle active mx-3 -mb-[1px] flex items-center border-b-2 border-b-transparent py-3 text-sm font-medium text-slate-600 focus-visible:outline-none dark:text-slate-200 [&.active]:border-blue-600 [&.active]:text-blue-600 [&.active]:dark:text-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 px-2 xs:px-0">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                </svg><!-- user-circle - outline - heroicons -->
                <span class="ms-2 hidden xs:block"> Overview </span>
            </a>
        </li>
        <li class="tab-item">
            <a href="#" data-target="#BillingsS1" class="tab-toggle mx-3 -mb-[1px] flex items-center border-b-2 border-b-transparent py-3 text-sm font-medium text-slate-600 focus-visible:outline-none dark:text-slate-200 [&.active]:border-blue-600 [&.active]:text-blue-600 [&.active]:dark:text-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 px-2 xs:px-0">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/>
                </svg><!-- credit-card - outline - heroicons -->
                <span class="ms-2 hidden xs:block"> Billings </span>
            </a>
        </li>
        <li class="tab-item">
            <a href="#" data-target="#SettingsS1" class="tab-toggle mx-3 -mb-[1px] flex items-center border-b-2 border-b-transparent py-3 text-sm font-medium text-slate-600 focus-visible:outline-none dark:text-slate-200 [&.active]:border-blue-600 [&.active]:text-blue-600 [&.active]:dark:text-blue-600">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 px-2 xs:px-0">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                </svg><!-- cog-6-tooth - outline - heroicons -->
                <span class="ms-2 hidden xs:block"> Settings </span>
            </a>
        </li>
    </ul><!-- tab-nav -->
    <div class="tab-content">
        <div class="tab-panel active hidden [&.active]:block" id="OverviewS1">
            <div class="prose dark:prose-invert p-6">
                Overview ipsum dolor sit amet consectetur adipisicing elit. Asperiores libero sint quod perferendis omnis, cupiditate eum veritatis adipisci dignissimos odio esse. Non suscipit explicabo dignissimos ducimus ipsa temporibus nemo facilis.
            </div>
        </div><!-- panel -->
        <div class="tab-panel hidden [&.active]:block" id="BillingsS1">
            <div class="prose dark:prose-invert p-6">
                Billings ipsum dolor sit amet consectetur adipisicing elit. Asperiores libero sint quod perferendis omnis, cupiditate eum veritatis adipisci dignissimos odio esse. Non suscipit explicabo dignissimos ducimus ipsa temporibus nemo facilis.
            </div>
        </div><!-- panel -->
        <div class="tab-panel hidden [&.active]:block" id="SettingsS1">
            <div class="prose dark:prose-invert p-6">
                Settings ipsum dolor sit amet consectetur adipisicing elit. Asperiores libero sint quod perferendis omnis, cupiditate eum veritatis adipisci dignissimos odio esse. Non suscipit explicabo dignissimos ducimus ipsa temporibus nemo facilis.
            </div>
        </div><!-- panel -->
    </div><!-- tab-content -->
</div>

<ul class="tab-nav flex gap-3 dark:border-slate-800">
    <li class="tab-item">
        <a href="#" data-target="#OverviewS2" class="tab-toggle active inline-flex text-sm font-semibold tracking-wider px-2.5 py-1.5 rounded-md transition-all bg-slate-100 dark:bg-slate-950 text-slate-600 dark:text-slate-300 [&.active]:bg-blue-600 [&.active]:text-white">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 px-2 xs:px-0">
                <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
            </svg><!-- user-circle - outline - heroicons -->
            <span class="ms-2 hidden xs:block"> Overview </span>
        </a>
    </li>
    <li class="tab-item">
        <a href="#" data-target="#BillingsS2" class="tab-toggle inline-flex text-sm font-semibold tracking-wider px-2.5 py-1.5 rounded-md transition-all bg-slate-100 dark:bg-slate-950 text-slate-600 dark:text-slate-300 [&.active]:bg-blue-600 [&.active]:text-white">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 px-2 xs:px-0">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/>
            </svg><!-- credit-card - outline - heroicons -->
            <span class="ms-2 hidden xs:block"> Billings </span>
        </a>
    </li>
    <li class="tab-item">
        <a href="#" data-target="#SettingsS2" class="tab-toggle inline-flex text-sm font-semibold tracking-wider px-2.5 py-1.5 rounded-md transition-all bg-slate-100 dark:bg-slate-950 text-slate-600 dark:text-slate-300 [&.active]:bg-blue-600 [&.active]:text-white">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 px-2 xs:px-0">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"/>
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
            </svg><!-- cog-6-tooth - outline - heroicons -->
            <span class="ms-2 hidden xs:block"> Settings </span>
        </a>
    </li>
</ul><!-- tab-nav -->
<div class="tab-content">
    <div class="tab-panel active hidden [&.active]:block" id="OverviewS2">
        <div class="prose dark:prose-invert py-6">
            Overview ipsum dolor sit amet consectetur adipisicing elit. Asperiores libero sint quod perferendis omnis, cupiditate eum veritatis adipisci dignissimos odio esse. Non suscipit explicabo dignissimos ducimus ipsa temporibus nemo facilis.
        </div>
    </div><!-- panel -->
    <div class="tab-panel hidden [&.active]:block" id="BillingsS2">
        <div class="prose dark:prose-invert py-6">
            Billings ipsum dolor sit amet consectetur adipisicing elit. Asperiores libero sint quod perferendis omnis, cupiditate eum veritatis adipisci dignissimos odio esse. Non suscipit explicabo dignissimos ducimus ipsa temporibus nemo facilis.
        </div>
    </div><!-- panel -->
    <div class="tab-panel hidden [&.active]:block" id="SettingsS2">
        <div class="prose dark:prose-invert py-6">
            Settings ipsum dolor sit amet consectetur adipisicing elit. Asperiores libero sint quod perferendis omnis, cupiditate eum veritatis adipisci dignissimos odio esse. Non suscipit explicabo dignissimos ducimus ipsa temporibus nemo facilis.
        </div>
    </div><!-- panel -->
</div><!-- tab-content -->

<!-- Tooltip top -->
<button data-placement="top" data-title="Tooltip Top" class="tooltip-toggle peer inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    Top
</button>
<!-- Tooltip bottom -->
<button data-placement="bottom" data-title="Tooltip Bottom" class="tooltip-toggle peer inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    Bottom
</button>
<!-- Tooltip end -->
<button data-placement="right" data-rtl-placement="left" data-title="Tooltip End" class="tooltip-toggle peer inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    End
</button>
<!-- Tooltip start -->
<button data-placement="left" data-rtl-placement="right" data-title="Tooltip Start" class="tooltip-toggle peer inline-flex items-center justify-center rounded-md px-5 py-2 gap-3 text-sm/[1.125rem] font-medium border border-blue-600 bg-blue-600 text-white transition-all hover:bg-blue-800 hover:border-blue-800">
    Start
</button>