Hope UI PRO - DESIGN SYSTEM

PRODUCTION READY FREE OPEN SOURCE DASHBOARD UI KIT AND DESIGN SYSTEM.

Components

Accordion

Documentation
  • This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
  • This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
  • This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
<div x-show.transition="checkActive('accordiansection')"  class="transition-opacity duration-150 linear " x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" id="accordiansection">
            <div class="w-full">
             <div class="overflow-hidden border border-secondary-400 dark:border-dark-bg rounded-lg"
            x-data="{selected:1}">
            <ul class="shadow-box">
            <li class="relative rounded-t-lg bg-[#f9f9f9] dark:bg-dark-strip">
                <button type="button" class="w-full px-6 py-4 text-secondary-500 transition-all dark:bg-dark-strip"
                @click="selected == 1 ? selected = null : selected = 1"
                x-bind:style="selected == 1 ? 'color: #2e46ba; background-color:rgba(138,146,166,0.03);' : 'color: grey;'">
                <div class="flex items-center justify-between">
                    <span>Accordion Item #1</span>
                    <span>
                    <svg xmlns="http://www.w3.org/2000/svg"
                        x-bind:style="selected == 1 ? 'color: blue; transform: rotate(-180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
                        class="text-secondary-600 w-7 h-7 active:stroke-primary-500" viewBox="0 0 20 20"
                        fill="currentColor">
                        <path fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd"></path>
                    </svg>
                    </span>
                </div>
                </button>
                <div class="relative overflow-hidden transition-all max-h-0" x-ref="container1"
                x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
                <div class="px-6 py-4 text-slate-400 dark:bg-dark-bg">
                    <strong>This is the first item's accordion body.</strong> It is hidden by default, until
                    the collapse plugin adds the appropriate classes that we use to style each element.
                    These classes control the overall appearance, as well as the showing and hiding via CSS
                    transitions. You can modify any of this with custom CSS or overriding our default
                    variables. It's also worth noting that just about any HTML can go within the
                    <span class="text-pink-600">.accordion-body</span>, though the transition does limit
                    overflow.
                </div>
                </div>
            </li>
            <li
                class="relative border-t border-secondary-500 dark:border-dark-bg bg-[#f9f9f9] dark:bg-dark-strip">
                <button type="button" class="w-full px-6 py-4 text-secondary-500 transition-all dark:bg-dark-strip"
                @click="selected !== 2 ? selected = 2 : selected = null"
                x-bind:style="selected == 2 ? 'color: #2e46ba; background-color:rgba(138,146,166,0.03); box-shadow: 0 0.125rem 0.25rem 0rem #3a57e84a;' : 'color: grey;'">
                <div class="flex items-center justify-between">
                    <span>Accordion Item #2</span>
                    <span>
                    <svg xmlns="http://www.w3.org/2000/svg"
                        x-bind:style="selected == 2 ? 'color: blue; transform: rotate(-180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
                        class="text-secondary-600 w-7 h-7 active:stroke-primary-500" viewBox="0 0 20 20"
                        fill="currentColor">
                        <path fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd"></path>
                    </svg>
                    </span>
                </div>
                </button>
                <div class="relative overflow-hidden transition-all max-h-0" x-ref="container2"
                x-bind:style="selected == 2 ? 'max-height: ' + $refs.container2.scrollHeight + 'px' : ''">
                <div class="px-6 py-4 text-slate-400 dark:bg-dark-bg">
                    <strong>This is the second item's accordion body.</strong> It is hidden by default,
                    until the collapse plugin adds the appropriate classes that we use to style each
                    element. These classes control the overall appearance, as well as the showing and hiding
                    via CSS transitions. You can modify any of this with custom CSS or overriding our
                    default variables. It's also worth noting that just about any HTML can go within the
                    <span class="text-pink-600">.accordion-body</span>, though the transition does limit
                    overflow.
                </div>
                </div>
            </li>
            <li
                class="relative transition-all border-t border-secondary-500 dark:border-dark-bg rounded-b-lg bg-[#f9f9f9] dark:bg-dark-strip">
                <button type="button" class="w-full px-6 py-4 text-secondary-500 dark:bg-dark-strip"
                @click="selected !== 3 ? selected = 3 : selected = null"
                x-bind:style="selected == 3 ? 'color: #2e46ba; background-color:rgba(138,146,166,0.03);' : 'color: grey;'">

                <div class="flex items-center justify-between">
                    <span>Accordion Item #3</span>
                    <span>
                    <svg xmlns="http://www.w3.org/2000/svg"
                        x-bind:style="selected == 3 ? 'color: blue; transform: rotate(-180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
                        class="text-secondary-600 w-7 h-7 active:stroke-primary-500" viewBox="0 0 20 20"
                        fill="currentColor">
                        <path fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd"></path>
                    </svg>
                    </span>
                </div>
                </button>
                <div class="relative overflow-hidden transition-all max-h-0" style="" x-ref="container3"
                x-bind:style="selected == 3 ? 'max-height: ' + $refs.container3.scrollHeight + 'px' : ''">
                <div class="py-4 px-6 text-slate-400 dark:bg-dark-bg">
                    <strong>This is the third item's accordion body.</strong> It is hidden by default, until
                    the collapse plugin adds the appropriate classes that we use to style each element.
                    These classes control the overall appearance, as well as the showing and hiding via CSS
                    transitions. You can modify any of this with custom CSS or overriding our default
                    variables. It's also worth noting that just about any HTML can go within the
                    <span class="text-pink-600">.accordion-body</span>, though the transition does limit
                    overflow.
                </div>
                </div>
            </li>
            </ul>
            </div>
            </div>
              </div>
             
A simple primary alert with an example link . Give it a click if you like.
A simple primary alert with an example link. Give it a click if you like.
An example alert with an icon
An example success alert with an icon
An example warning alert with an icon
An example danger alert with an icon
This is a success alert—check it out!
This is a info alert—check it out!
This is a warning alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a warning alert—check it out!
Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.


Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<div  x-show.transition="checkActive('alertsection')"  class="transition-opacity duration-150 linear " x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" id="alertsection">
    <div class="relative flex justify-between p-4 mb-4 text-white bg-primary-500 border-0 rounded dark:bg-primary-600">
    <span>A simple primary alert with
        <a class="font-bold text-secondary-400">an example link</a>
        . Give it a click if you like.
    </span>
    <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
        onclick="closeAlert(event)">
        <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
        <path
            d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
        </svg>
    </button>
    </div>

    <div class="mt-4">
    <div
        class="relative flex justify-between p-4 mb-4 text-white bg-primary-200 border-2 border-primary-500 rounded dark:bg-primary-400">
        <span class="text-primary-800">A simple primary alert with
        <a class="font-bold text-sky-900">an example link.</a>
        Give it a click if you like.
        </span>
        <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
        onclick="closeAlert(event)">
        <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
            <path
            d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
        </svg>
        </button>
    </div>
    </div>

    <div class="mt-4">
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="check-circle-fill" fill="#12703a" viewBox="0 0 16 16">
        <path
            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z">
        </path>
        </symbol>
        <symbol id="info-fill" fill="blue" viewBox="0 0 16 16">
        <path
            d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z">
        </path>
        </symbol>
        <symbol id="exclamation-triangle-fill" fill="#a94a13" viewBox="0 0 16 16">
        <path
            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z">
        </path>
        </symbol>
        <symbol id="exclamation-triangle-fill1" fill="#862317" viewBox="0 0 16 16">
        <path
            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z">
        </path>
        </symbol>
    </svg>
    <div
        class="relative flex justify-start p-4 mb-4 text-primary-800 bg-primary-200 border-2 border-primary-500 rounded dark:bg-primary-200">
        <svg class="flex-shrink-0 mr-2" width="24" height="24">
        <use xlink:href="#info-fill"></use>
        </svg>
        <div>An example alert with an icon</div>
    </div>
    <div
        class="relative flex justify-start p-4 mb-4 text-success-600 bg-success-100 border-2 border-success-500 rounded dark:bg-success-300">
        <svg class="flex-shrink-0 mr-2" width="24" height="24">
        <use xlink:href="#check-circle-fill"></use>
        </svg>
        <div>An example success alert with an icon</div>
    </div>
    <div
        class="relative flex justify-start p-4 mb-4 text-warning-600 bg-warning-100 border-2 border-warning-500 rounded dark:bg-warning-400">
        <svg class="flex-shrink-0 mr-2" width="24" height="24">
        <use xlink:href="#exclamation-triangle-fill"></use>
        </svg>
        <div>An example warning alert with an icon</div>
    </div>
    <div
        class="relative flex justify-start p-4 mb-4 text-danger-600 bg-danger-100 border-2 border-danger-500 rounded dark:bg-danger-400 ">
        <svg class="flex-shrink-0 mr-2" width="24" height="24">
        <use xlink:href="#exclamation-triangle-fill1"></use>
        </svg>
        <div>An example danger alert with an icon</div>
    </div>
    </div>

    <div class="mt-4 ">
    <div
        class="relative flex justify-between p-4 mb-4 text-success-600 bg-success-100 border-l-4 border-success-500 rounded dark:bg-success-300 ">
        <span> This is a success alert—check it out!</span>
        <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
        onclick="closeAlert(event)">
        <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
            <path
            d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
        </svg>
        </button>
    </div>
    <div
        class="relative flex justify-between p-4 mb-4 border-t-4 rounded text-info-700 bg-info-200 border-info-500">
        <span> This is a info alert—check it out!</span>
        <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
        onclick="closeAlert(event)">
        <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
            <path
            d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
        </svg>
        </button>
    </div>
    <div
        class="relative flex justify-between p-4 mb-4 text-warning-600 bg-warning-100 border-r-4 border-warning-500 rounded  dark:bg-warning-300">
        <span> This is a warning alert—check it out!</span>
        <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
        onclick="closeAlert(event)">
        <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
            <path
            d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
        </svg>
        </button>
    </div>
    <div
        class="relative flex justify-between p-4 mb-4 text-danger-600 bg-danger-100 border-b-4 border-danger-500 rounded dark:bg-danger-300">
        <span> This is a danger alert—check it out!</span>
        <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
        onclick="closeAlert(event)">
        <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
            <path
            d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
        </svg>
        </button>
    </div>
    </div>

    <div class="mt-4">
    <div
        class="relative flex justify-between p-4 mb-4 text-warning-600 bg-warning-100 border-2 border-warning-500 dark:bg-warning-300">
        <span> This is a warning alert—check it out!</span>
        <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
        onclick="closeAlert(event)">
        <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
            <path
            d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
        </svg>
        </button>
    </div>
    <div class="relative flex justify-between p-4 mb-4 text-white bg-warning-500 dark:bg-warning-300 ">
        <span> This is a warning alert—check it out!</span>
        <button class="bg-transparent outline-none opacity-80 hover:opacity-100 focus:outline-none"
        onclick="closeAlert(event)">
        <svg class="w-4 h-4" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'>
            <path
            d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
        </svg>
        </button>
    </div>
    </div>

    <div class="mt-4">
    <div class="relative p-4 mb-4 text-success-600 bg-success-100 border-2 border-success-500 rounded dark:bg-green-900 dark:text-green-500 ">
        <h5 class="text-xl font-medium">Well done!</h5>
        <p class="mb-4">Aww yeah, you successfully read this important alert message. This example text is
        going to run a bit longer so that you can see how spacing within an alert works with this kind of
        content.</p>
        <hr class="mb-4 text-success-500 border-success-500">
        <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
        </p>
    </div>
    </div>
</div>

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Danger Warning Info Light Dark
Primary Secondary Success Warning Danger
Primary Secondary Success Warning Danger
<div  x-show.transition="checkActive('badgesection')"  class="transition-opacity duration-150 linear " x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" id="badgesection">
    <p class="text-3xl font-medium leading-tight md:text-4xl ">Example heading
    <span
        class="inline-block whitespace-nowrap px-2 py-0.5 mb-4  leading-none md:text-3xl text-2xl font-bold text-white bg-primary-500 rounded">New</span>
    </p>
    <p class="text-2xl font-medium leading-tight md:text-3xl ">Example heading
    <span
        class="inline-block whitespace-nowrap px-2 py-0.5 mb-2 leading-none md:text-2xl text-xl font-bold text-white bg-secondary-600 rounded">New</span>
    </p>
    <p class="text-2xl font-medium leading-tight ">Example heading
    <span
        class="inline-block whitespace-nowrap px-2 py-0.5 mb-2 leading-none text-xl  font-bold text-white bg-success-500 rounded">New</span>
    </p>
    <p class="text-xl font-medium leading-tight ">Example heading
    <span
        class="inline-block whitespace-nowrap px-2 py-0.5 mb-2 leading-none text-lg  font-bold text-white bg-danger-600 rounded">New</span>
    </p>
    <p class="text-lg font-medium leading-tight ">Example heading
    <span
        class="inline-block whitespace-nowrap px-2 py-0.5 mb-2 leading-none   font-bold text-white bg-warning-500 rounded">New</span>
    </p>
    <p class=" font-medium leading-tight">Example heading
    <span
        class="inline-block whitespace-nowrap px-2 py-0.5 mb-2 leading-none text-xs  font-bold text-white bg-info-500 rounded">New</span>
    </p>
    <div class="mt-4">
    <button type="button"
        class="btn btn-primary">
        Notifications<span
        class="inline-flex bg-secondary-600 text-white text-sm rounded p-2 py-0.5 ml-2 font-semibold">4</span>
    </button>
    <button type="button"
        class="btn btn-primary">
        Inbox
        <span
        class="absolute p-1 z-10 start-100 rounded-full bg-danger-500 text-white text-xs -top-3 -right-2 font-bold">
        99+
        </span>
    </button>
    <button type="button"
        class="btn btn-primary">
        Profile
        <span
        class="absolute p-1 z-10 w-4 h-4 border border-white start-100 rounded-full bg-danger-500 text-white text-xs -top-1 -right-1 font-bold">
        </span>
    </button>
    </div>
    <div class="mt-4">
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-white bg-primary-500 rounded-full">Primary</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-white bg-secondary-600 rounded-full">Secondary</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-white bg-success-500 rounded-full">Success</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-white bg-danger-500 rounded-full">Danger</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-white bg-warning-500 rounded-full">Warning</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-white bg-info-500 rounded-full">Info</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-black bg-secondary-300 rounded-full">Light</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-white bg-black rounded-full">Dark</span>
    </div>
    <div class="mt-4">
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-primary-500  bg-primary-100  rounded-full 	 ">Primary</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-secondary-600  bg-secondary-300  rounded-full">Secondary</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-success-500  bg-success-100  rounded-full">Success</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-danger-500  bg-danger-100  rounded-full">Danger</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-warning-500  bg-warning-100  rounded-full ">Warning</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none  rounded-full text-info-500 bg-info-100">Info</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-secondary-800  bg-secondary-100  rounded-full">Light</span>
    <span
        class="inline-block whitespace-nowrap px-2 py-1 mb-2 text-xs text-center font-bold leading-none text-secondary-900  bg-secondary-300  rounded-full">Dark</span>
    </div>
    <div class="mt-4">
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-primary-500  bg-primary-100  rounded-full  ">Primary
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-primary-500 stroke-white rounded-full -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-secondary-600  bg-secondary-300  rounded-full">Secondary
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-secondary-600 stroke-white rounded-full -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-success-500  bg-success-100  rounded-full">Success
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-success-500 stroke-white rounded-full -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-warning-500  bg-warning-100  rounded-full ">Warning
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-warning-500 stroke-white rounded-full -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-danger-500  bg-danger-100  rounded-full">Danger
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-danger-500 stroke-white rounded-full -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>


    </div>
    <div class="mt-4">
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-primary-500  bg-primary-100  rounded">Primary
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-primary-500 stroke-white rounded -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-secondary-600  bg-secondary-300  rounded">Secondary
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-secondary-600 stroke-white rounded -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-success-500  bg-success-100  rounded">Success
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-success-500 stroke-white rounded -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-warning-500  bg-warning-100  rounded ">Warning
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-warning-500 stroke-white rounded -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>
    <span
        class="inline-block whitespace-nowrap px-4 py-1 mb-2 mr-3 text-base text-center leading-none text-danger-500  bg-danger-100  rounded">Danger
        <button>
        <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" class="bg-danger-500 stroke-white roundeds -mr-10">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
            </path>
        </svg>
        </button>
    </span>
    </div>
</div>

Breadcrumb

Documentation
<div x-show.transition="checkActive('buttonsection')"  class="transition-all duration-150 linear " x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" id="buttonsection">
    <div class="flex flex-wrap items-center gap-2">
    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary rounded-full">Rounded</button>
    <button class="btn btn-primary flex">
        <span class="mr-2">
            <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
            </svg>
        </span>With Icon
    </button>
    <button
        class="btn btn-primary btn-icon">
        <span class="btn-inner">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    </div>

    <div class="mt-4">
    <button type="button"
        class="btn btn-primary">Primary</button>
    <button type="button"
        class="btn btn-secondary">Secondary</button>
    <button type="button"
        class="btn btn-success">Success</button>
    <button type="button"
        class="btn btn-danger">Danger</button>
    <button type="button"
        class="btn btn-warning">Warning</button>
    <button type="button"
        class="btn btn-info">Info</button>
    <button type="button"
        class="btn bg-secondary-200 mt-2 hover:bg-secondary-300">Light</button>
    <button type="button"
        class="btn bg-black text-white mt-2">Dark</button>
    <button type="button"
        class="btn btn-link px-6 py-2 mt-2 text-primary-500 transition-all duration-500 ease-in-out bg-transparent hover:text-primary-600 focus:shadow-lg rounded">Link</button>
    </div>
    <div class="mt-4">
    <button type="button"
        class="btn btn-outlined btn-primary hover:bg-primary-500 hover:text-white">Primary</button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-500 hover:text-white">Secondary</button>
    <button type="button"
        class="btn btn-outlined btn-success hover:bg-success-500 hover:text-white">Success</button>
    <button type="button"
        class="btn btn-outlined btn-danger hover:bg-danger-500 hover:text-white">Danger</button>
    <button type="button"
        class="btn btn-outlined btn-warning hover:bg-warning-500 hover:text-white">Warning</button>
    <button type="button"
        class="btn btn-outlined btn-info hover:bg-info-500 hover:text-white">Info</button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-300 mt-2 hover:text-white">Light</button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-black hover:text-white mt-2">Dark</button>
    </div>

    <div class="mt-4">
    <button type="button"
        class="btn bg-primary-500/10 hover:bg-primary-500/25 text-primary-500">Primary</button>
    <button type="button"
        class="btn bg-secondary-500/10 hover:bg-secondary-500/25 text-secondary-500">Secondary</button>
    <button type="button"
        class="btn bg-success-500/10 hover:bg-success-500/25 text-success-500">Success</button>
    <button type="button"
        class="btn bg-danger-500/10 hover:bg-danger-500/25 text-danger-500">Danger</button>
    <button type="button"
        class="btn bg-warning-500/10 hover:bg-warning-500/25 text-warning-500">Warning</button>
    <button type="button"
        class="btn bg-info-500/10 hover:bg-info-500/25 text-info-500">Info</button>
    <button type="button"
        class="btn bg-secondary-200 hover:bg-secondary-300 mt-2">Light</button>
    <button type="button"
        class="btn bg-secondary-400 hover:bg-secondary-800 mt-2">Dark</button>
    </div>


    <div class="mt-4">
    <button type="button"
        class="btn btn-primary inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Primary
    </button>
    <button type="button"
        class="btn btn-secondary inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Secondary
    </button>
    <button type="button"
        class="btn btn-success inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Success
    </button>
    <button type="button"
        class="btn btn-danger inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Danger
    </button>
    <button type="button"
        class="btn btn-warning mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Warning
    </button>
    <button type="button"
        class="btn btn-info mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Info
    </button>
    <button type="button"
        class="btn bg-secondary-200 hover:bg-secondary-300 mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Light
    </button>
    <button type="button"
        class="btn bg-black text-white mt-2 hover:bg-dark-500 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Dark
    </button>
    </div>
    <div class="mt-4">
    <button type="button"
        class="btn btn-outlined btn-primary hover:bg-primary-500 hover:text-white inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Primary
    </button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-500 hover:text-white inline-flex"
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
        </path>
        </svg>
        </span>Secondary
    </button>
    <button type="button"
        class="btn btn-outlined btn-success hover:bg-success-500 hover:text-white inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Success
    </button>
    <button type="button"
        class="btn btn-outlined btn-danger hover:bg-danger-500 hover:text-white inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Danger
    </button>
    <button type="button"
        class="btn btn-outlined btn-warning mt-2 hover:bg-warning-500 hover:text-white inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Warning
    </button>
    <button type="button"
        class="btn btn-outlined btn-info hover:bg-info-500 hover:text-white inline-flex mt-2 ">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Info
    </button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-300 hover:text-white inline-flex mt-2 ">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Light
    </button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-900 hover:text-white inline-flex mt-2">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Dark
    </button>
    </div>

    <div class="mt-4">
    <button type="button"
        class="btn bg-primary-500/10 hover:bg-primary-500/25 text-primary-500 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Primary
    </button>
    <button type="button"
        class="btn bg-secondary-500/10 hover:bg-secondary-500/25 text-secondary-500 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Secondary
    </button>
    <button type="button"
        class="btn bg-success-500/10 hover:bg-success-500/25 text-success-500 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Success
    </button>
    <button type="button"
        class="btn bg-danger-500/10 hover:bg-danger-500/25 text-danger-500 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Danger
    </button>
    <button type="button"
        class="btn bg-warning-500/10 mt-2 hover:bg-warning-500/25 text-warning-500 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Warning
    </button>
    <button type="button"
        class="btn bg-info-500/10 hover:bg-info-500/25 text-info-500 mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Info
    </button>
    <button type="button"
        class="btn bg-light-500/10 hover:bg-light-500/25 text-light-500 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Light
    </button>
    <button type="button"
        class="btn bg-gray-500/10 hover:bg-gray-500/25 text-gray-500 mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Dark
    </button>
    </div>


    <div class="mt-4">
    <button type="button"
        class="btn btn-primary btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-secondary btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-success btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-danger btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-warning btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-info btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-secondary btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-black btn-icon text-white">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    </div>
    <div class="mt-4">
    <button type="button"
        class="btn btn-icon btn-outlined btn-primary hover:bg-primary-500 hover:text-white inline-flex">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-secondary hover:bg-secondary-500 hover:text-white inline-flex">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-success hover:bg-success-500 hover:text-white inline-flex">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-warning hover:bg-warning-500 hover:text-white inline-flex">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-danger hover:bg-danger-500 hover:text-white inline-flex">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-info hover:bg-info-500 hover:text-white inline-flex ">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-secondary hover:bg-secondary-200 hover:text-secondary-500 inline-flex">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-secondary hover:bg-black hover:text-white inline-flex">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    </div>

    <div class="mt-4">
    <button type="button"
        class="btn bg-primary-500/10 hover:bg-primary-500/25 text-primary-500 btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-secondary-500/10 hover:bg-secondary-500/25 text-secondary-500 btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-success-500/10 hover:bg-success-500/25 text-success-500 btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-danger-500/10 hover:bg-danger-500/25 text-danger-500 btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-warning-500/10 hover:bg-warning-500/25 text-warning-500 btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-info-500/10 hover:bg-info-500/25 text-info-500 btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-secondary-500/10 hover:bg-secondary-500/25 text-secondary-500 btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-secondary-400 hover:bg-secondary-500 btn-icon">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    </div>
    <div class="mt-4">
    <button type="button"
        class="btn btn-primary rounded-full">Primary</button>
    <button type="button"
        class="btn btn-secondary rounded-full">Secondary</button>
    <button type="button"
        class="btn btn-success rounded-full">Success</button>
    <button type="button"
        class="btn btn-danger rounded-full">Danger</button>
    <button type="button"
        class="btn btn-warning rounded-full">Warning</button>
    <button type="button"
        class="btn btn-info rounded-full">Info</button>
    <button type="button"
        class="btn bg-secondary-200 hover:bg-secondary-300 rounded-full">Light</button>
    <button type="button"
        class="btn bg-black text-white rounded-full mt-2">Dark</button>
    <button type="button"
        class="px-6 py-2 mb-2 mr-1 text-primary-500 transition-all duration-500 ease-in-out bg-transparent hover:text-primary-600 focus:shadow-lg rounded-full">Link</button>
    </div>
    <div class="mt-4">
    <button type="button"
        class="btn btn-outlined btn-primary hover:bg-primary-500 hover:text-white inline-flex rounded-full">Primary</button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-500 hover:text-white inline-flex rounded-full">Secondary</button>
    <button type="button"
        class="btn btn-outlined btn-success hover:bg-success-500 hover:text-white inline-flex rounded-full">Success</button>
    <button type="button"
        class="btn btn-outlined btn-danger hover:bg-danger-500 hover:text-white inline-flex rounded-full">Danger</button>
    <button type="button"
        class="btn btn-outlined btn-warning hover:bg-warning-500 hover:text-white inline-flex rounded-full">Warning</button>
    <button type="button"
        class="btn btn-outlined btn-info hover:bg-info-500 hover:text-white inline-flex rounded-full">Info</button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-200 hover:text-secondary-300 rounded-full inline-flex mt-2">Light</button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-800 hover:text-white inline-flex rounded-full mt-2">Dark</button>
    </div>

    <div class="mt-4">
    <button type="button"
        class="btn bg-primary-500/10 hover:bg-primary-500/25 text-primary-500 rounded-full">Primary</button>
    <button type="button"
        class="btn bg-secondary-500/10 hover:bg-secondary-500/25 text-secondary-500 rounded-full">Secondary</button>
    <button type="button"
        class="btn bg-success-500/10 hover:bg-success-500/25 text-success-500 rounded-full">Success</button>
    <button type="button"
        class="btn bg-danger-500/10 hover:bg-danger-500/25 text-danger-500 rounded-full">Danger</button>
    <button type="button"
        class="btn bg-warning-500/10 hover:bg-warning-500/25 text-warning-500 rounded-full">Warning</button>
    <button type="button"
        class="btn bg-info-500/10 hover:bg-info-500/25 text-info-500 rounded-full ">Info</button>
    <button type="button"
        class="btn bg-secondary-200 hover:bg-secondary-300 rounded-full">Light</button>
    <button type="button"
        class="btn bg-secondary-500 rounded-full mt-2">Dark</button>
    </div>


    <div class="mt-4">
    <button type="button"
        class="btn btn-primary rounded-full inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Primary
    </button>
    <button type="button"
        class="btn btn-secondary rounded-full inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Secondary
    </button>
    <button type="button"
        class="btn btn-success rounded-full inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Success
    </button>
    <button type="button"
        class="btn btn-danger rounded-full inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Danger
    </button>
    <button type="button"
        class="btn btn-warning rounded-full inline-flex mt-2">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Warning
    </button>
    <button type="button"
        class="btn btn-info rounded-full mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Info
    </button>
    <button type="button"
        class="btn bg-secondary-200 hover:bg-secondary-300 rounded-full mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Light
    </button>
    <button type="button"
        class="btn bg-black text-white rounded-full mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Dark
    </button>
    </div>
    <div class="mt-4">
    <button type="button"
        class="btn btn-outlined btn-primary hover:bg-primary-500 hover:text-white inline-flex rounded-full">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Primary
    </button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-500 hover:text-white inline-flex rounded-full"
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
        </path>
        </svg>
        </span>Secondary
    </button>
    <button type="button"
        class="btn btn-outlined btn-success hover:bg-success-500 hover:text-white inline-flex rounded-full">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Success
    </button>
    <button type="button"
        class="btn btn-outlined btn-danger hover:bg-danger-500 hover:text-white inline-flex rounded-full">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Danger
    </button>
    <button type="button"
        class="btn btn-outlined btn-warning hover:bg-warning-500 hover:text-white inline-flex rounded-full mt-2">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Warning
    </button>
    <button type="button"
        class="btn btn-outlined btn-info hover:bg-info-500 hover:text-white inline-flex rounded-full mt-2">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Info
    </button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-secondary-200 hover:text-secondary-400 inline-flex rounded-full mt-2">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Light
    </button>
    <button type="button"
        class="btn btn-outlined btn-secondary hover:bg-black hover:text-white inline-flex rounded-full mt-2">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Dark
    </button>
    </div>

    <div class="mt-4">
    <button type="button"
        class="btn bg-primary-500/10 hover:bg-primary-500/25 text-primary-500 rounded-full inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Primary
    </button>
    <button type="button"
        class="btn bg-secondary-500/10 hover:bg-secondary-500/25 text-secondary-500 rounded-full inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Secondary
    </button>
    <button type="button"
        class="btn bg-success-500/10 hover:bg-success-500/25 text-success-500 rounded-full inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Success
    </button>
    <button type="button"
        class="btn bg-danger-500/10 hover:bg-danger-500/25 text-danger-500 rounded-full inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Danger
    </button>
    <button type="button"
        class="btn bg-warning-500/10 hover:bg-warning-500/25 text-warning-500 rounded-full inline-flex mt-2">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Warning
    </button>
    <button type="button"
        class="btn bg-info-500/10 hover:bg-info-500/25 text-info-500 rounded-full mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Info
    </button>
    <button type="button"
        class="btn bg-secondary-200 hover:bg-secondary-300 rounded-full  inline-flex mt-2 ">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Light
    </button>
    <button type="button"
        class="btn bg-secondary-800 hover:bg-secondary-700 rounded-full mt-2 inline-flex">
        <span class="mr-2">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>Dark
    </button>
    </div>


    <div class="mt-4">
    <button type="button"
        class="btn btn-primary btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-secondary btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-success btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-danger btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-warning btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-info btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-secondary-200 hover:bg-secondary-300 btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-black text-white btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    </div>
    <div class="mt-4">
    <button type="button"
        class="btn btn-icon btn-outlined btn-primary hover:bg-primary-500 hover:text-white inline-flex rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-secondary hover:bg-secondary-500 hover:text-white inline-flex rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-success hover:bg-success-500 hover:text-white inline-flex rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-warning hover:bg-warning-500 hover:text-white inline-flex rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-danger hover:bg-danger-500 hover:text-white inline-flex rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-info hover:bg-info-500 hover:text-white inline-flex rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-secondary hover:bg-secondary-200 hover:text-secondary-500 inline-flex rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-icon btn-outlined btn-secondary hover:bg-black hover:text-white inline-flex rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    </div>

    <div class="mt-4">
    <button type="button"
        class="btn bg-primary-500/10 hover:bg-primary-500/25 text-primary-500 btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-secondary-500/10 hover:bg-secondary-500/25 text-secondary-500 btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-success-500/10 hover:bg-success-500/25 text-success-500 btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-danger-500/10 hover:bg-danger-500/25 text-danger-500 btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-warning-500/10 hover:bg-warning-500/25 text-warning-500 btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-info-500/10 hover:bg-info-500/25 text-info-500 btn-icon rounded-full ">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-secondary-200 hover:bg-secondary-300 btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn bg-secondary-400 hover:bg-secondary-500 btn-icon rounded-full">
        <span>
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    </div>


    <div class="mt-4">
    <button type="button"
        class="btn btn-primary btn-sm">Smallbutton</button>
    <button type="button"
        class="btn btn-primary btn-md">Defaultbutton</button>
    <button type="button"
        class="btn btn-primary btn-lg">Largebutton</button>
    </div>


    <div class="mt-4 flex justify-start items-center gap-1">
    <button type="button"
        class="btn btn-primary btn-icon btn-sm rounded-full">
        <span class="btn-inner">
        <svg width="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-primary btn-icon btn-md rounded-full">
        <span class="btn-inner">
        <svg width="24" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    <button type="button"
        class="btn btn-primary btn-icon btn-lg rounded-full">
        <span class="btn-inner">
        <svg width="40" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
            </path>
        </svg>
        </span>
    </button>
    </div>
</div>

Button Groups

Documentation
2
6
1
<div x-show.transition="checkActive('buttongroupsection')"  class="transition-all duration-150 linear " x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"  id="buttongroupsection">
    <div class="flex flex-wrap justify-start">
    <div class="relative inline-flex mr-2 mt-2">
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded-l shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700">1</button>
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700">2</button>
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700">3</button>
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded-r shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700">4</button>
    </div>
    <div class="relative inline-flex mr-2 mt-2">
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded-l shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700">5</button>
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700">6</button>
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded-r shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700">7</button>
    </div>
    <div class="relative inline-flex mt-2">
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700">8</button>
    </div>
    </div>
    <div class="mt-4">
    <div class="relative inline-flex flex-wrap">
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded-l shadow-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Home</button>
        <button type="button"
        class="px-6 py-2 text-primary-500 transition-all duration-500 ease-in-out border-t border-b border-l border-primary-500 shadow-md hover:shadow-xl hover:bg-primary-500 hover:text-white">Profile</button>
        <button type="button"
        class="px-6 py-2 text-primary-500 transition-all duration-500 ease-in-out border border-primary-500 rounded-r shadow-md hover:shadow-xl hover:bg-primary-500 hover:text-white">Message</button>
    </div>
    </div>
    <div class="mt-4">
    <div class="relative inline-flex flex-col">
        <button type="button"
        class="px-6 py-2 text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded-t shadow-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Home</button>
        <button type="button"
        class="px-6 py-2 text-primary-500 transition-all duration-500 ease-in-out border-b border-l border-r border-primary-500 shadow-md hover:shadow-xl hover:bg-primary-500 hover:text-white">Profile</button>
        <button type="button"
        class="px-6 py-2 text-primary-500 transition-all duration-500 ease-in-out border-b border-l border-r border-primary-500 rounded-b shadow-md hover:shadow-xl hover:bg-primary-500 hover:text-white">Message</button>
    </div>
    </div>
    <div class="mt-4">
    <div class="relative inline-flex mr-6 mb-2" x-data="{count:2}">
        <button x-on:click="count > 1 ?count--:count"
        class="relative block px-2 py-1 text-sm rounded-l text-primary-500 bg-white dark:bg-dark-card border-l border-t border-b  border-primary-500 dark:hover:bg-primary-500 dark:hover:text-white hover:bg-primary-500 hover:text-white">-</button>
        <span
        class="relative block px-4 py-1 text-sm text-primary-500 bg-white dark:bg-dark-card dark:hover:bg-primary-500 dark:hover:text-white border-t border border-primary-500 "
        x-text="count">2</span>
        <button x-on:click="count++"
        class="relative block px-2 py-1 text-sm rounded-r text-primary-500 bg-white dark:bg-dark-card border-r border-t border-b  border-primary-500 dark:hover:bg-primary-500 dark:hover:text-white hover:bg-primary-500 hover:text-white">+</button>
    </div>
    <div class="relative inline-flex mr-6 mb-2" x-data="{count:6}">
        <button x-on:click="count > 1 ?count--:count"
        class="relative block px-2 py-1 text-sm rounded-l text-secondary-600 bg-white dark:bg-dark-card border-l border-t border-b  border-secondary-600 dark:hover:bg-secondary-600 dark:hover:text-white hover:bg-secondary-600 hover:text-white">-</button>
        <span
        class="relative block px-4 py-1 text-sm text-secondary-500 bg-white dark:bg-dark-card border-t border border-secondary-600 dark:hover:bg-secondary-600 dark:hover:text-white"
        x-text="count">6</span>
        <button x-on:click="count++"
        class="relative block px-2 py-1 text-sm rounded-r text-secondary-600 bg-white dark:bg-dark-card border-r border-t border-b  border-secondary-600 dark:hover:bg-secondary-600 dark:hover:text-white hover:bg-secondary-600 hover:text-white">+</button>
    </div>
    <div class="relative inline-flex mr-6 mb-2" x-data="{count:1}">
        <button x-on:click="count > 1 ?count--:count"
        class="relative block px-2 py-1 text-sm rounded-l text-secondary-300 bg-white dark:bg-dark-card border-l border-t border-b  border-secondary-300 dark:hover:bg-secondary-300 dark:hover:text-black hover:bg-secondary-300 hover:text-white">-</button>
        <span
        class="relative block px-4 py-1 text-sm text-secondary-500 bg-white dark:bg-dark-card border-t border border-secondary-300 dark:hover:bg-secondary-300 dark:hover:text-black "
        x-text="count">1</span>
        <button x-on:click="count++"
        class="relative block px-2 py-1 text-sm rounded-r text-secondary-300 dark:bg-dark-card bg-white border-r border-t border-b  border-secondary-300 hover:bg-secondary-300 hover:text-white dark:hover:bg-secondary-300 dark:hover:text-black ">+</button>
    </div>
    </div>
</div>

Dropdowns

Documentation

<div class="block mb-4" data-tab-content="true" id="calendarsection">
              <div class="bg-white inline-flex">
                <div class="mt-4">
                  <div class="w-2/5">
                    <div class="inline_flatpickr"></div>
                  </div>
                </div>
                <div class="block ml-14">
                <div class="w-full mt-4">
                  <input type="text" class="date_flatpicker block w-full mt-1 px-4 py-2  placeholder-secondary-400 border focus:border-primary-500 focus:bg-white focus:shadow rounded outline-none" placeholder="Date Picker">
                </div>
                <div class="w-full mt-4">
                  <input type="text" class="range_flatpicker block w-full mt-1 px-4 py-2  placeholder-secondary-400 border focus:border-primary-500 focus:bg-white focus:shadow rounded outline-none" placeholder="Range Date Picker">
                </div>
                <div class="w-full mt-4">
                  <input type="text" class="time_flatpicker block w-full mt-1 px-4 py-2  placeholder-secondary-400 border focus:border-primary-500 focus:bg-white focus:shadow rounded outline-none" placeholder="Time Picker">
                </div>
                <div class="relative flex items-stretch w-full mt-4 ">
                  <input type="text" class="wrap_flatpicker block w-full mt-1 px-4 py-2  placeholder-secondary-400 border focus:border-primary-500 focus:bg-white focus:shadow rounded-l outline-none" placeholder="Select Date">
                  <span class="flex items-center mt-1 px-4 py-2 font-semibold text-secondary-500 border-t border-b border-r whitespace-nowrap" id="basic-addon2">
                    <a class="" data-tp-title"toggle" href="javascript:void(0)">
                    <svg width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    </a>
                  </span>
                  <span class="flex items-center mt-1 px-4 py-2 font-semibold text-secondary-500 border-t border-b border-r rounded-r whitespace-nowrap" id="basic-addon2">
                    <a class="" data-tp-title"clear" href="javascript:void(0)">
                    <svg width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    </a>
                  </span>
                </div>
                </div>
              </div>
            </div>
                
Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go Somewhere
Featured
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go Somewhere
2 days ago
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Placeholder Image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago


<div class="block" data-tab-content="true" id="cardsection">
              <div class="flex flex-wrap">
                <div class="px-3 mt-4">
                  <div class="max-w-xs mb-0 overflow-hidden rounded-lg shadow-lg">
                    <svg class="object-cover w-full h-48" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false">
                      <title>Placeholder</title>
                      <rect width="100%" height="100%" fill="#868e96"></rect><text x="40%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
                    </svg>
                    <div class="px-6 py-5">
                      <h5 class="mb-3 text-xl font-medium text-black">Card title</h5>
                      <p class="mb-4 text-secondary-600">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                      <a href="#" class="inline-flex justify-center px-6 py-2 text-sm font-medium text-white transition-all duration-500 ease-in-out bg-primary-500 border border-transparent rounded shadow-sm hover:shadow-lg hover:bg-primary-600 ">Go Somewhere</a>
                    </div>
                  </div>
                </div>
                <div class="px-3 mt-4">
                  <div class="max-w-xs mb-0 overflow-hidden rounded-lg shadow-lg">
                    <div class="p-6 pb-0 text-black font-medium text-2xl">Featured</div>
                    <div class="px-6 py-4">
                      <h5 class="mb-3 text-xl font-medium text-black">Card title</h5>
                      <p class="mb-4 text-secondary-600">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                      <a href="#" class="inline-flex justify-center px-6 py-2 text-sm font-medium text-white transition-all duration-500 ease-in-out bg-primary-500 border border-transparent rounded shadow-sm hover:shadow-lg hover:bg-primary-600 ">Go Somewhere</a>
                    </div>
                    <div class="p-6 text-secondary-600">2 days ago</div>
                  </div>
                </div>
                <div class="px-3 mt-6">
                  <div class="max-w-xs mb-0 overflow-hidden rounded-lg shadow-lg">
                    <div class="px-6 py-4">
                      <h5 class="mb-3 text-xl font-medium text-black">Card title</h5>
                      <p class="mb-4 text-secondary-600">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul>
                      <li class="px-4 py-2 border-b">An item</li>
                      <li class="px-4 py-2 border-b">A second item</li>
                      <li class="px-4 py-2 ">A third item</li>
                    </ul>
                    <div class="px-6 py-4">
                      <a href="#" class="text-primary-500">Card link</a>
                      <a href="#" class="ml-6 text-primary-500">Another link</a>
                    </div>
                  </div>
                </div>
                <div class="px-3 mt-6">
                  <div class="w-full max-w-xs overflow-hidden rounded-lg shadow-lg sm:flex">
                    <div class="md:w-1/3">
                      <svg class="object-cover w-full h-full" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false">
                        <title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#868e96"></rect><text x="30%" y="50%" fill="#dee2e6" dy=".3em">Image</text>
                      </svg>
                    </div>
                    <div class="flex-1 px-6 py-4">
                      <h5 class="mb-3 text-xl font-medium text-black">Card title</h5>
                      <p class="mb-4 text-secondary-600">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <p class="mb-4 text-secondary-600"><small class="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
First slide

First slide label

Some representative placeholder content for First slide

Second slide

second slide label

Some representative placeholder content for Second slide

Third slide

Third slide label

Some representative placeholder content for Third slide


<div class="block" data-tab-content="true" id="carouselsection">
  <div class="custom-swiper-slider">
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide relative">
          <svg class="block w-full" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img">
            <rect width="100%" height="100%" fill="#777"></rect><text x="46%" y="50%" fill="#555" dy="0rem">First slide</text>
          </svg>
          <div class="absolute text-white w-full block bottom-12 text-center">
            <div class="text-black text-2xl">
              <p>First slide label</p>
            </div>
            <div>
              <p>Some representative placeholder content for First slide</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <svg class="block w-full" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img">
            <rect width="100%" height="100%" fill="#666"></rect><text x="46%" y="50%" fill="#444" dy="0rem">Second slide</text>
          </svg>
          <div class="absolute text-white bottom-12 w-full text-center">
            <div class="text-black text-2xl">
              <p>second slide label</p>
            </div>
            <p>Some representative placeholder content for Second slide</p>
          </div>
        </div>
        <div class="swiper-slide">
          <svg class="block w-full" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img">
            <rect width="100%" height="100%" fill="#555"></rect><text x="46%" y="50%" fill="#333" dy="0rem">Third slide</text>
          </svg>
          <div class="absolute inline-block text-white bottom-12 w-full text-center">
            <div class="text-black text-2xl">
              <p>Third slide label</p>
            </div>
            <p>Some representative placeholder content for Third slide</p>
          </div>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>

                    
Link with href
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

              <div>
              <div x-data={show:false}>
                <a x-on:click.prevent="show=!show"
                  class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">
                  Link with href
                </a>
                <button @click="show=!show"
                  class="px-6 py-2.5 bg-blue-600 ml-2 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                  type="button">
                  Button with data-target
                </button>
                <div x-show="show" class="block p-6 rounded-lg shadow-lg bg-white text-secondary-600">
                  Some placeholder content for the collapse component. This panel is hidden by default but revealed when
                  the user activates the relevant trigger.
                </div>
              </div>
              <div x-data={show:false}>
                <p class="my-4">
                  <button @click="show=!show"
                    class="px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                    type="button" data-tp-toggle="collapse" data-tw-target="#collapseWidthExample" aria-expanded="false"
                    aria-controls="collapseWidthExample">
                    Toggle width collapse
                  </button>
                </p>
                <div>
                  <div class="collapse collapse-horizontal" id="collapseWidthExample">
                    <div x-show="show" class="block p-6 rounded-lg shadow-lg bg-white max-w-sm" style="width: 300px;">
                      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when
                      triggered.
                    </div>
                  </div>
                </div>
              </div>
              <div x-data={show:false}>
                <p class="md:space-x-1 space-y-1 md:space-y-0 mb-4">
                  <a x-on:click.prevent="show=!show" class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                    data-tp-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false"
                    aria-controls="multiCollapseExample1">Toggle first element</a>
                  <button x-on:click.prevent="show=!show"
                    class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                    type="button" data-tp-toggle="collapse" data-tw-target="#multiCollapseExample2"
                    aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
                  <button @click="show=!show"
                    class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                    type="button" data-tp-toggle="collapse" data-tw-target=".multi-collapse" aria-expanded="false"
                    aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
                </p>
                <div class="grid md:grid-cols-2 gap-4">
                  <div>
                    <div class="collapse multi-collapse" id="multiCollapseExample1">
                      <div x-show="show" class="block p-6 rounded-lg shadow-lg bg-white">
                        Some placeholder content for the first collapse component of this multi-collapse example. This
                        panel is hidden by default but revealed when the user activates the relevant trigger.
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="collapse multi-collapse" id="multiCollapseExample2">
                      <div x-show="show" class="block p-6 rounded-lg shadow-lg bg-white">
                        Some placeholder content for the second collapse component of this multi-collapse example. This
                        panel is hidden by default but revealed when the user activates the relevant trigger.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

                    

List Groups

Documentation

<div class="block" data-tab-content="true" id="listgroupsection">
              <div class="mt-3">
                <div class="flex flex-col w-full ">
                  <a href="#" class="w-full px-4 py-2 text-white bg-primary-500 border-primary-400 rounded-t">The
                    current link item</a>
                  <a href="#"
                    class="w-full px-4 py-2 border-b border-l border-r border-secondary-400 active:text-secondary-700 active:bg-primary-100">A
                    second link item</a>
                  <a href="#"
                    class="w-full px-4 py-2 border-b border-l border-r border-secondary-400 active:text-secondary-700 active:bg-primary-100">A
                    third link item</a>
                  <a href="#"
                    class="w-full px-4 py-2 border-b border-l border-r border-secondary-400 active:text-secondary-700 active:bg-primary-100">A
                    fourth link item</a>
                  <a
                    class="w-full px-4 py-2 text-secondary-700 border-b border-l border-r border-secondary-400 rounded-b">
                    A disabled link item</a>
                </div>
              </div>
              <div class="mt-4">
                <ul class="flex flex-col w-full ">
                  <li class="w-full px-4 py-2 text-secondary-700 border border-secondary-400 rounded-t">A disabled item
                  </li>
                  <li class="w-full px-4 py-2 border-b border-l border-r border-secondary-400">A second item</li>
                  <li class="w-full px-4 py-2 border-b border-l border-r border-secondary-400">A third item</li>
                  <li class="w-full px-4 py-2 border-b border-l border-r border-secondary-400">A fourth item</li>
                  <li class="w-full px-4 py-2 border-b border-l border-r border-secondary-400 rounded-b">And a fifth one
                  </li>
                </ul>
              </div>
              <div class="mt-4">
                <ul class="flex flex-col w-full ">
                  <li class="w-full px-4 py-2 border-b border-secondary-400">An item</li>
                  <li class="w-full px-4 py-2 border-b border-secondary-400">A second item</li>
                  <li class="w-full px-4 py-2 border-b border-secondary-400">A third item</li>
                  <li class="w-full px-4 py-2 border-b border-secondary-400">A fourth item</li>
                  <li class="w-full px-4 py-2 border-b border-secondary-400">And a fifth one</li>
                </ul>
              </div>
              <div class="mt-4">
                <ol class="flex flex-col w-full">
                  <li class="flex justify-between w-full px-4 py-2 border border-secondary-400">
                    <div class="mr-auto">
                      <div class="flex">
                        <div class="pr-2">1.</div>
                        <div class="font-bold">Subheading</div>
                      </div>
                      <span class="pl-5">Cras justo odio</span>
                    </div>
                    <div>
                      <span
                        class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-primary-500 rounded-full">14</span>
                    </div>
                  </li>
                  <li class="flex justify-between w-full px-4 py-2 border-b border-l border-r border-secondary-400">
                    <div class="mr-auto">
                      <div class="flex">
                        <div class="pr-2">2.</div>
                        <div class="font-bold">Subheading</div>
                      </div>
                      <span class="pl-5">Cras justo odio</span>
                    </div>
                    <div>
                      <span
                        class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-primary-500 rounded-full">14</span>
                    </div>
                  </li>
                  <li class="flex justify-between w-full px-4 py-2 border-b border-l border-r border-secondary-400">
                    <div class="mr-auto">
                      <div class="flex">
                        <div class="pr-2">3.</div>
                        <div class="font-bold">Subheading</div>
                      </div>
                      <span class="pl-5">Cras justo odio</span>
                    </div>
                    <div>
                      <span
                        class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-primary-500 rounded-full">14</span>
                    </div>
                  </li>
                </ol>
              </div>
              <div class="mt-4">
                <div class="flex flex-col w-full ">
                  <a href="#"
                    class="w-full px-4 py-2 text-secondary-700 border border-secondary-400 rounded-t hover:text-secondary-700 hover:bg-secondary-100">A
                    simple default list group item</a>
                  <a href="#"
                    class="w-full px-4 py-2 text-primary-700 bg-primary-100 border border-secondary-400 hover:bg-primary-200">A
                    simple primary list group item</a>
                  <a href="#"
                    class="w-full px-4 py-2 text-secondary-700 bg-secondary-200 border border-secondary-400 hover:bg-secondary-300">A
                    simple secondary list group item</a>
                  <a href="#"
                    class="w-full px-4 py-2 text-success-700 bg-success-100 border border-secondary-400 hover:bg-success-200">A
                    simple success list group item</a>
                  <a href="#"
                    class="w-full px-4 py-2 text-danger-700 bg-danger-100 border border-secondary-400 hover:bg-danger-200">A
                    simple danger list group item</a>
                  <a href="#"
                    class="w-full px-4 py-2 text-warning-700 bg-warning-100 border border-secondary-400 hover:bg-warning-200">A
                    simple warning list group item</a>
                  <a href="#"
                    class="w-full px-4 py-2 border border-secondary-400 bg-info-100 hover:b-white text-info-700 hover:bg-info-200">A
                    simple info list group item</a>
                  <a href="#"
                    class="w-full px-4 py-2 text-secondary-600 bg-secondary-100 border border-secondary-400 hover:bg-secondary-200">A
                    simple light list group item</a>
                  <a href="#"
                    class="w-full px-4 py-2 text-black bg-secondary-300 border border-secondary-400 rounded-b hover:bg-secondary-500">A
                    simple dark list group item</a>
                </div>
              </div>
              <div class="mt-4">
                <ul class="flex flex-col w-full ">
                  <li class="flex justify-between w-full px-4 py-2 border border-secondary-400 rounded-t ">A list item
                    <div><span
                        class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-primary-500 rounded-full">14</span>
                    </div>
                  </li>
                  <li class="flex justify-between w-full px-4 py-2 border-b border-l border-r border-secondary-400">A
                    second list item
                    <div><span
                        class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-primary-500 rounded-full">2</span>
                    </div>
                  </li>
                  <li
                    class="flex justify-between w-full px-4 py-2 border-b border-l border-r border-secondary-400 rounded-b">
                    A third list item
                    <div><span
                        class="inline-block whitespace-nowrap px-2 py-0.5 text-xs text-center font-bold leading-none text-white bg-primary-500 rounded-full">1</span>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="flex flex-col w-full mt-4">
                <a href="#" class="w-full px-4 py-2 bg-primary-500 border-primary-500 rounded-t">
                  <div class="flex justify-between w-full">
                    <h5 class="mb-1 text-xl font-medium text-white">List group item heading</h5>
                    <small class="text-white">3 days ago</small>
                  </div>
                  <p class="mb-1 text-white">Some placeholder content in a paragraph.</p>
                  <small class="text-white">And some small print.</small>
                </a>
                <a href="#"
                  class="w-full px-4 py-2 border-b border-l border-r border-secondary-400 active:bg-primary-100">
                  <div class="flex justify-between w-full">
                    <h5 class="mb-1 text-xl font-medium">List group item heading</h5>
                    <small class="text-muted">3 days ago</small>
                  </div>
                  <p class="mb-1">Some placeholder content in a paragraph.</p>
                  <small class="text-muted">And some muted small print.</small>
                </a>
                <a href="#"
                  class="w-full px-4 py-2 border-b border-l border-r border-secondary-400 rounded-b active:bg-primary-100">
                  <div class="flex justify-between w-full">
                    <h5 class="mb-1 text-xl font-medium">List group item heading</h5>
                    <small class="text-muted">3 days ago</small>
                  </div>
                  <p class="mb-1">Some placeholder content in a paragraph.</p>
                  <small class="text-muted">And some muted small print.</small>
                </a>
              </div>
              <div class="flex flex-col w-full mt-4">
                <label class="w-full px-4 py-2 border border-secondary-400 rounded-t">
                  <input class="w-4 h-4 mr-1" type="checkbox">First checkbox
                </label>
                <label class="w-full px-4 py-2 border-b border-l border-r border-secondary-400">
                  <input class="w-4 h-4 mr-1" type="checkbox">Second checkbox
                </label>
                <label class="w-full px-4 py-2 border-b border-l border-r border-secondary-400">
                  <input class="w-4 h-4 mr-1" type="checkbox">Third checkbox
                </label>
                <label class="w-full px-4 py-2 border-b border-l border-r border-secondary-400">
                  <input class="w-4 h-4 mr-1" type="checkbox">Fourth checkbox
                </label>
                <label class="w-full px-4 py-2 border-b border-l border-r border-secondary-400 rounded-b">
                  <input class="w-4 h-4 mr-1" type="checkbox">Fifth checkbox
                </label>
              </div>
            </div>
Modal title

I will not close if you click outside me. Don't even try to press escape key.

Full screen modal

...


           <div class="block" data-tab-content="true" id="modalsection">
              <div class="flex justify-start flex-wrap">
                <div x-data="{ open: false}">
                  <button @click="open = ! open" x-on:click="scrolldisable()"
                    class="mb-2 mr-2 px-6 py-2 cursor-pointer text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded shadow-md hover:shadow-xl hover:bg-primary-600 hover:text-white">Launch
                    demo modal</button>
                  <div class="fixed w-full h-full top-0 z-50" x-show="open">
                    <span x-on:click="scrollenable()"
                      class="fixed bg-secondary-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                    <!-- Mobile navbar -->
                    <nav class="fixed inset-x-0 w-auto max-w-lg mx-auto my-6 z-40" x-show="open"
                      @click.away="open=false" x-transition:enter="transform transition-transform duration-700"
                      x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0"
                      x-transition:leave="transform transition-transform duration-700"
                      x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full">
                      <div x-show="open" x-transition:enter="transform transition-transform duration-700"
                        x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0"
                        x-transition:leave="transform transition-transform duration-700"
                        x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full">
                        <div
                          class="flex flex-col w-full bg-white border rounded-lg shadow-lg outline-none focus:outline-none">
                          <div class="flex p-4 border-b border-secondary-200 border-solid rounded-t">
                            <h5 class="mx-0 text-xl font-medium">Modal title</h5>
                            <button type="button"
                              class="px-6 py-2 m-1 ml-auto -mt-2 -mb-2 -mr-2 text-lg font-semibold text-center text-black bg-transparent rounded b-0"
                              @click="open = ! open" x-on:click="scrollenable()">X</button>
                          </div>
                          <div class="flex-auto p-4">...</div>
                          <div class="flex flex-wrap justify-end p-2 border-t border-secondary-200 border-solid">
                            <button type="button"
                              class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700"
                              @click="open = ! open" x-on:click="scrollenable()">Close</button>
                            <button type="button"
                              class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded shadow-md text-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Save
                              changes</button>
                          </div>
                        </div>
                      </div>
                    </nav>
                  </div>
                </div>

                <div x-data="{ open: false}">
                  <button @click="open = ! open" x-on:click="scrolldisable()"
                    class="mb-2 mr-2 px-6 py-2 cursor-pointer text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded shadow-md hover:shadow-xl hover:bg-primary-600 hover:text-white">Launch
                    Static Backdrop Modal</button>
                  <div x-show="open"
                    class="fixed inset-0 z-50 overflow-x-hidden overflow-y-auto outline-none focus:outline-none"
                    x-transition:enter="transform transition-transform duration-700"
                    x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0"
                    x-transition:leave="transform transition-transform duration-700"
                    x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full">
                    <div x-show="open" class="w-auto max-w-lg mx-auto my-6"
                      x-transition:enter="transform transition-transform duration-700"
                      x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0"
                      x-transition:leave="transform transition-transform duration-700"
                      x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full">
                      <div
                        class="flex flex-col w-full bg-white border rounded-lg shadow-lg outline-none focus:outline-none">
                        <div class="flex p-4 border-b border-secondary-200 border-solid rounded-t">
                          <h5 class="mx-0 text-xl font-medium">Modal title</h5>
                          <button type="button"
                            class="px-6 py-2 m-1 ml-auto -mt-2 -mb-2 -mr-2 text-lg font-semibold text-center text-black bg-transparent rounded b-0"
                            @click="open = ! open" x-on:click="scrollenable()">X</button>
                        </div>
                        <div class=" flex-auto p-4">
                          <p class="mb-4">I will not close if you click outside me. Don't even try to press escape key.
                          </p>
                        </div>
                        <div class="flex flex-wrap justify-end p-2 border-t border-secondary-200 border-solid">
                          <button type="button"
                            class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700"
                            @click="open = ! open" x-on:click="scrollenable()">Close</button>
                          <button type="button"
                            class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded shadow-md text-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Understood</button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <span x-show="open" class="fixed bg-secondary-900 bg-opacity-70 w-full h-full inset-x-0 top-0 z-40"
                    x-transition:enter="transform transition-transform duration-600"
                    x-transition:leave="transform transition-transform duration-700">
                  </span>
                </div>
              </div>

              <div class="flex justify-start flex-wrap">
                <div x-data="{ open: false}">
                  <button @click="open = ! open" x-on:click="scrolldisable()"
                    class="mb-2 mr-2 px-6 py-2 cursor-pointer text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded shadow-md hover:shadow-xl hover:bg-primary-600 hover:text-white">Vertically
                    Centered Scrollable Modal</button>
                  <div class="fixed w-full h-full top-0 z-50" x-show="open">
                    <span x-on:click="scrollenable()"
                      class="fixed bg-secondary-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                    <!-- Mobile navbar -->
                    <nav class="fixed inset-x-0 w-auto max-w-lg mx-auto my-6 z-40" x-show="open"
                      @click.away="open=false" x-transition:enter="transform transition-transform duration-700"
                      x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0"
                      x-transition:leave="transform transition-transform duration-700"
                      x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full">
                      <div x-show="open" x-transition:enter="transform transition-transform duration-700"
                        x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0"
                        x-transition:leave="transform transition-transform duration-700"
                        x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full">
                        <div
                          class="flex flex-col w-full bg-white border rounded-lg shadow-lg outline-none focus:outline-none h-[95vh]">
                          <div class="flex p-4 border-b border-secondary-200 border-solid rounded-t">
                            <h5 class="mx-0 text-xl font-medium">Modal title</h5>
                            <button type="button"
                              class="px-6 py-2 m-1 ml-auto -mt-2 -mb-2 -mr-2 text-lg font-semibold text-center text-black bg-transparent rounded b-0"
                              @click="open = ! open" x-on:click="scrollenable()">X</button>
                          </div>
                          <div class="p-4 overflow-hidden overflow-y-auto">
                            <p class="h-screen text-secondary-600">This is some placeholder content to show the
                              scrolling
                              behavior for modals. We use repeated line breaks to demonstrate how content can exceed
                              minimum inner height,
                              thereby showing inner scrolling. When content becomes longer than the prefedined
                              max-height of
                              modal, content will be cropped and scrollable within the modal.</p>
                            <p class="text-secondary-600">This content should appear at the bottom after you scroll.</p>
                          </div>
                          <div class="flex flex-wrap justify-end p-2 border-t border-secondary-200 border-solid">
                            <button type="button"
                              class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700"
                              @click="open = ! open" x-on:click="scrollenable()">Close</button>
                            <button type="button"
                              class="inline-block px-6 py-2 m-1 text-center text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded shadow-md text-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Save
                              Changes</button>
                          </div>
                        </div>
                      </div>
                    </nav>
                  </div>
                </div>
                <div x-data="{ open: false}">
                  <button @click="open = ! open" x-on:click="scrolldisable()"
                    class="mb-2 mr-2 px-6 py-2 cursor-pointer text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded shadow-md hover:shadow-xl hover:bg-primary-600 hover:text-white">Full
                    Screen</button>
                  <div x-show="open" class="fixed top-0 left-0 right-0 z-50 outline-none focus:outline-none"
                    x-transition.duration.500ms>
                    <div class="flex flex-col w-full bg-white shadow-lg outline-none focus:outline-none h-[100vh]">
                      <div class="flex p-4 border-b border-secondary-200 rounded-t">
                        <h5 class="mx-0 text-xl font-medium">Full screen modal</h5>
                        <button type="button"
                          class="px-6 py-2 m-1 ml-auto -mt-2 -mb-2 -mr-2 text-lg font-semibold text-center text-black bg-transparent rounded b-0"
                          @click="open = ! open" x-on:click="scrollenable()">X</button>
                      </div>
                      <p class="p-4 overflow-hidden h-screen text-secondary-600">...</p>
                      <div class="flex justify-end p-2 border-t border-secondary-200">
                        <button type="button"
                          class="px-6 py-2 m-1 text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700"
                          @click="open = ! open" x-on:click="scrollenable()">Close</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="fixed inset-0 z-40 hidden bg-black opacity-40" id="modal4-backdrop"></div>
            </div>

Offcanvas

Documentation

<div class="block" data-tab-content="true" id="offcanvassection">
              <div class="w-full">
                <div class="flex flex-wrap">
                  <div x-data="{ open: false }">
                    <button type="button" x-on:click="scrolldisable()" @click="open = !open"
                      class=" relative whitespace-nowrap inline-block px-6 py-2 mb-2 mr-1 text-center text-white duration-700 bg-primary-500 border border-primary-500 rounded shadow-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Toggle
                      top Offcanvas</button>
                    <div class="fixed w-full h-full top-0 z-50" x-show="open" style="display: none;">
                      <span x-on:click="scrollenable()"
                        class="fixed bg-secondary-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                      <!-- Mobile navbar -->
                      <nav class="top-0 w-full left-0 fixed py-4 bg-white dark:bg-secondary-800 h-64 overflow-auto z-40"
                        x-show="open" @click.away="open=false" x-description="Mobile menu" role="menu"
                        x-transition:enter="transform transition-transform duration-700"
                        x-transition:enter-start="-translate-y-full" x-transition:enter-end="-translate-y-0"
                        x-transition:leave="transform transition-transform duration-700"
                        x-transition:leave-start="-translate-y-0" x-transition:leave-end="-translate-y-full">
                        <div class="p-3">
                          <h3 class="text-2xl font-semibold text-secondary-700">Offcanvas top</h3>
                          <a x-on:click="scrollenable()"
                            class="absolute mr-2 top-1 right-5 text-4xl cursor-pointer text-black dark:text-white"
                            @click="open = !open">&times;</a>
                        </div>
                        <p class="p-3 text-secondary-500">....</p>
                      </nav>
                    </div><!-- End Mobile menu -->
                  </div>

                  <div x-data="{ open: false }">
                    <button type="button" x-on:click="scrolldisable()" @click="open = !open"
                      class=" relative whitespace-nowrap inline-block px-6 py-2 mb-2 mr-1 text-center text-white duration-700 bg-primary-500 border border-primary-500 rounded shadow-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Toggle
                      right Offcanvas</button>
                    <div class="fixed w-full h-full right-0 z-50" x-show="open" style="display: none;">
                      <span x-on:click="scrollenable()"
                        class="fixed bg-secondary-900 bg-opacity-70 w-full h-full inset-x-0 top-0"
                        x-transition:enter="transform transition-transform duration-700"
                        x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
                        x-transition:leave="transform transition-transform duration-700"
                        x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"></span>
                      <!-- Mobile navbar -->
                      <nav
                        class="right-0 md:w-96 w-full fixed top-0 py-4 bg-white dark:bg-secondary-800 h-full overflow-auto z-40"
                        x-show="open" @click.away="open=false" x-description="Mobile menu" role="menu"
                        x-transition:enter="transform transition-transform duration-700"
                        x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
                        x-transition:leave="transform transition-transform duration-700"
                        x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
                        <div class="p-3">
                          <h3 class="text-2xl font-semibold text-secondary-700">Offcanvas right</h3>
                          <a x-on:click="scrollenable()"
                            class="absolute mr-2 top-1 right-5 text-4xl text-black cursor-pointer dark:text-white"
                            @click="open = !open">&times;</a>
                        </div>
                        <p class="p-3 text-secondary-500">....</p>
                      </nav>
                    </div><!-- End Mobile menu -->
                  </div>
                  <div x-data="{ open: false }">
                    <button type="button" x-on:click="scrolldisable()" @click="open = !open"
                      class=" relative whitespace-nowrap inline-block px-6 py-2 mb-2 mr-1 text-center text-white duration-700 bg-primary-500 border border-primary-500 rounded shadow-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Toggle
                      bottom Offcanvas</button>
                    <div class="fixed w-full h-full botttom-0 z-50" x-show="open" style="display: none;">
                      <span x-on:click="scrollenable()"
                        class="fixed bg-secondary-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                      <!-- Mobile navbar -->
                      <nav
                        class="bottom-0 w-full fixed right-0 py-4 bg-white dark:bg-secondary-800 h-64 overflow-auto z-40"
                        x-show="open" @click.away="open=false" x-description="Mobile menu" role="menu"
                        x-transition:enter="transform transition-transform duration-700"
                        x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0"
                        x-transition:leave="transform transition-transform duration-700"
                        x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full">
                        <div class="p-3">
                          <h3 class="text-2xl font-semibold text-secondary-700">Offcanvas bottom</h3>
                          <a x-on:click="scrollenable()"
                            class="absolute mr-2 cursor-pointer top-1 right-5 text-4xl text-black dark:text-white"
                            @click="open = !open">&times;</a>
                        </div>
                        <p class="p-3 text-secondary-500">....</p>
                      </nav>
                    </div><!-- End Mobile menu -->
                  </div>

                  <div x-data="{ open: false }">
                    <button type="button" x-on:click="scrolldisable()" @click="open = !open"
                      class=" relative whitespace-nowrap inline-block px-6 py-2 mb-2 mr-1 text-center text-white duration-700 bg-primary-500 border border-primary-500 rounded shadow-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Toggle
                      Left Offcanvas</button>
                    <div class="fixed w-full h-full left-0 z-50" x-show="open" style="display: none;">
                      <span x-on:click="scrollenable()"
                        class="fixed bg-secondary-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                      <!-- Mobile navbar -->
                      <nav
                        class="left-0 md:w-96 w-full fixed top-0 py-4 bg-white backdrop-blur-sm dark:bg-secondary-800 h-full overflow-y-hidden z-40"
                        x-show="open" @click.away="open=false"
                        x-transition:enter="transform transition-transform duration-700"
                        x-transition:enter-start="-translate-x-full" x-transition:enter-end="-translate-x-0"
                        x-transition:leave="transform transition-transform duration-700"
                        x-transition:leave-start="-translate-x-0" x-transition:leave-end="-translate-x-full">
                        <div class="p-3">
                          <h3 class="text-2xl font-semibold text-secondary-700">Offcanvas left</h3>
                          <a x-on:click="scrollenable()"
                            class="absolute mr-2 top-1 right-5 cursor-pointer text-4xl text-black dark:text-white"
                            @click="open = !open">&times;</a>
                        </div>
                        <p class="p-3 text-secondary-500">....</p>
                      </nav>
                    </div><!-- End Mobile menu -->
                  </div>
                <div x-data="{ open: false }">
                  <button type="button" @click="open = !open"
                    class=" relative whitespace-nowrap inline-block px-6 py-2 mb-2 mr-1 text-center text-white duration-700 bg-primary-500 border border-primary-500 rounded shadow-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">Toggle
                    Scroll Offcanvas</button>
                  <div class="fixed w-full h-full left-0 z-50" x-show="open" style="display: none;">
                    <span x-on:click="scrollenable()"
                      class="fixed bg-secondary-900 bg-opacity-70 w-full h-full inset-x-0 top-0"></span>
                    <!-- Mobile navbar -->
                    <nav
                      class="left-0 md:w-96 w-full fixed top-0 py-4 bg-white backdrop-blur-sm dark:bg-secondary-800 h-full overflow-y-hidden z-40"
                      x-show="open" @click.away="open=false"
                      x-transition:enter="transform transition-transform duration-700"
                      x-transition:enter-start="-translate-x-full" x-transition:enter-end="-translate-x-0"
                      x-transition:leave="transform transition-transform duration-700"
                      x-transition:leave-start="-translate-x-0" x-transition:leave-end="-translate-x-full">
                      <div class="p-3">
                        <h3 class="text-2xl font-semibold text-secondary-700">Offcanvas Scroll</h3>
                        <a class="absolute mr-2 top-1 right-5 cursor-pointer text-4xl text-black dark:text-white"
                          @click="open = !open">&times;</a>
                      </div>
                      <p class="p-3 text-secondary-500">....</p>
                    </nav>
                  </div><!-- End Mobile menu -->
                </div>
              </div>
              </div>
            </div>
                

Pagination

Documentation

<div class="block" data-tab-content="true" id="paginationsection">
              <nav class="relative flex">
                <a href="#"
                  class="relative block px-3 py-0.5 text-sm  rounded-l text-primary-500 bg-white border-l border-t border-b  border-secondary-300 focus:bg-secondary-200 hover:bg-secondary-200">1</a>
                <a href="#"
                  class="relative block px-3 py-0.5 text-sm text-white bg-primary-500 border-l border-t border-b border-primary-500 ">2</a>
                <a href="#"
                  class="relative block px-3 py-0.5 text-sm rounded-r text-primary-500 bg-white border-r border-t border-b border-secondary-300 focus:bg-secondary-200 hover:bg-secondary-200">3</a>
              </nav>
              <nav class="relative flex mt-3">
                <a href="#"
                  class="relative block px-4 py-1  text-primary-500 bg-white border-t border-b border-l border-secondary-300 rounded-l-lg focus:bg-secondary-200 hover:bg-secondary-200"><span>«</span></a>
                <a href="#"
                  class="relative block px-4 py-1  text-primary-500 bg-white border-t border-b border-l border-secondary-300 focus:bg-secondary-200 hover:bg-secondary-200">1</a>
                <a href="#"
                  class="relative block px-4 py-1  text-primary-500 bg-white border-t border-b border-l border-secondary-300 focus:bg-secondary-200 hover:bg-secondary-200">2</a>
                <a href="#"
                  class="relative block px-4 py-1  text-primary-500 bg-white border border-t border-l border-secondary-300 focus:bg-secondary-200 hover:bg-secondary-200">3</a>
                <a href="#"
                  class="relative block px-4 py-1  text-primary-500 bg-white border-t border-b border-r border-secondary-300 rounded-r-lg focus:bg-secondary-200 hover:bg-secondary-200"><span>»</span></a>
              </nav>
              <nav class="relative inline-flex flex-wrap mt-3">
                <a class="relative block px-6 py-2 text-xl text-secondary-600 border-t border-b border-l border-secondary-300 rounded-l-lg cursor-pointer"
                  disabled>Previous</a>
                <a href="#"
                  class="relative block px-6 py-2 text-xl text-primary-500 bg-white border border-secondary-300 focus:bg-secondary-200 hover:bg-secondary-200">1</a>
                <a href="#"
                  class="relative block px-6 py-2 text-xl text-white bg-primary-500 border border-primary-500">2</a>
                <a href="#"
                  class="relative block px-6 py-2 text-xl text-primary-500 bg-white border border-secondary-300 focus:bg-secondary-200 hover:bg-secondary-200">3</a>
                <a href="#"
                  class="relative block px-6 py-2 text-xl text-primary-500 bg-white border-t border-b border-r border-secondary-300 rounded-r-lg focus:bg-secondary-200 hover:bg-secondary-200">Next</a>
              </nav>
            </div>

<div class="block" data-tab-content="true" id="popoverssection">

<button type="button"
class="relative inline-block px-6 py-2 mb-4 mr-4
text-center text-white transition-all duration-500 ease-in-out bg-danger-500 border border-danger-500 rounded shadow-md hover:shadow-xl hover:bg-danger-600 focus:bg-danger-600"
onclick="togglepopover(event,'right','tooltip000')">Click to toggle popover</button>
<div id="tooltip000" class="z-10 hidden text-sm
bg-white border rounded w-72">
<h3 class=" px-4 py-2 mb-0  bg-secondary-300 border-b">Popover title</h3>
<div class="p-4 text-secondary-500">And here's some amazing content. It's very engaging. Right?
</div>
<span
class="absolute border-l border-b top-14 -left-2 w-3 h-3 bg-white transform rotate-45 -mt-1 mr-3"></span>
</div>


<div class="mt-4">
<button type="button"
class="relative inline-block px-6 py-2 mb-4 mr-4
text-center text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700"
onclick="togglepopover(event,'top','tooltip001')">Popover on top</button>
<div id="tooltip001" class="hidden text-sm
bg-white border rounded w-72">
<div class="p-4 text-secondary-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
<span
class="absolute border-r border-b -bottom-2 right-32 w-3 h-3 bg-white transform rotate-45"></span>
</div>

<button type="button"
class="relative inline-block px-6 py-2 mb-4 mr-4
text-center text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700"
onclick="togglepopover(event,'right','tooltip002')">Popover on end</button>
<div id="tooltip002" class="z-10 hidden text-sm
bg-white border rounded w-72 ">
<div class="p-4 text-secondary-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
<span
class="absolute border-l border-b top-8 -left-2 w-3 h-3 bg-white transform rotate-45 -mt-1 mr-3"></span>
</div>


<button type="button"
class="relative inline-block px-6 py-2 mb-4 mr-4
text-center text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700"
onclick="togglepopover(event,'bottom','tooltip003')">Popover on bottom</button>
<div id="tooltip003" class="hidden text-sm
bg-white border rounded w-72">
<div class="p-4 text-secondary-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
<span
class="absolute border-l border-t top-0 right-32 w-3 h-3 bg-white transform rotate-45 -mt-2 mr-3"></span>
</div>


<button type="button"
class=" relative inline-block px-6 py-2 mb-4 mr-4
text-center text-white transition-all duration-500 ease-in-out bg-secondary-600 border border-secondary-600 rounded shadow-md hover:shadow-xl hover:bg-secondary-700 focus:bg-secondary-700"
onclick="togglepopover(event,'left','tooltip004')">Popover on start</button>
<div id="tooltip004" class="hidden text-sm
bg-white border rounded w-72">
<div class="p-4 text-secondary-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</div>
<span
class="absolute border-r border-t top-8 -right-1 w-3 h-3 bg-white transform rotate-45 -mr-1"></span>
</div>
</div>
</div>
0%
25%
50%
75%
100%
40%
40%
40%

<div class="block" data-tab-content="true" id="progresssection">
<div>
  <div class="flex w-full h-4 align-middle bg-secondary-200 rounded-full shadow-inner">
    <div
      class="w-0/3 h-4 py-1 text-xs leading-none text-center justify-center flex items-center text-white bg-primary-500 rounded-l-full">
      0%
    </div>
  </div>
  <div class="flex w-full h-4 mt-4 align-middle bg-secondary-200 rounded-full shadow-inner">
    <div
      class="w-1/4 h-4 py-1 text-xs leading-none text-center justify-center flex items-center text-white bg-success-500 rounded-l-full">
      25%</div>
  </div>
  <div class="flex w-full h-4 mt-4 align-middle bg-secondary-200 rounded-full shadow-inner">
    <div
      class="w-2/4 h-4 py-1 text-xs leading-none text-center justify-center flex items-center text-white rounded-l-full bg-info-500">
      50%</div>
  </div>
  <div class="flex w-full h-4 mt-4 align-middle bg-secondary-200 rounded-full shadow-inner">
    <div
      class="w-3/4 h-4 py-1 text-xs leading-none text-center flex items-center justify-center text-white bg-warning-500 rounded-l-full">
      75%</div>
  </div>
  <div class="flex w-full h-4 mt-4 align-middle bg-secondary-200 rounded-full shadow-inner">
    <div
      class="w-full h-4 py-1 text-xs leading-none flex items-center justify-center text-center text-white bg-danger-500 rounded-full">
      100%</div>
  </div>
  <div class="block mt-4 ">
    <div class="flex justify-end">
      <div><span class="text-secondary-500">40%</span></div>
    </div>
  </div>
  <div class="flex w-full align-middle bg-secondary-200 rounded-full shadow-inner h-10px">
    <div
      class="w-2/5 py-1 text-xs leading-none text-center text-white bg-danger-500 rounded-l-full h-10px">
    </div>
  </div>
  <div class="block mt-4 ">
    <div class="flex justify-end">
      <div><span class="text-secondary-500">40%</span></div>
    </div>
  </div>
  <div class="flex w-full align-middle bg-secondary-200 rounded-full shadow-inner h-10px">
    <div
      class="w-2/5 py-1 text-xs leading-none text-center text-white bg-primary-500 rounded-l-full h-10px">
    </div>
  </div>
  <div class="block mt-4 ">
    <div class="flex justify-end">
      <div><span class="text-secondary-500">40%</span></div>
    </div>
  </div>
  <div class="flex w-full align-middle bg-secondary-200 rounded-full shadow-inner h-10px">
    <div
      class="w-2/5 py-1 text-xs leading-none text-center text-white bg-success-500 rounded-l-full h-10px">
    </div>
  </div>
  <div class="mt-4">
    <div class="flex w-full h-4 align-middle bg-secondary-200 rounded-full shadow-inner">
      <div
        class="w-1/5 h-4 py-1 text-xs leading-none text-center text-white bg-primary-500 rounded-l-full">
      </div>
      <div class="w-1/3 h-4 py-1 text-xs leading-none text-center text-white bg-success-500"></div>
    </div>
  </div>
</div>
</div>
NEW
DISCOUNT
NEW OFFERS

<div class="block" data-tab-content="true" id="toastssection">
                  <div class="flex flex-col">
                    <div x-data="{show: false }" class="bg-secondary-600 md:w-full rounded">
                      <div class="bg-secondary position-relative" style="height: 200px;">
                        <div class="iq-ribbon-effect text-primary">
                          <div class="ribbon mb-2">
                            <span class="ribbon1 text-primary-500 pl-4 bg-white leading-[3rem] w-16 top-1.5">NEW</span>
                          </div>
                          <div class="ribbon mb-2">
                            <span
                              class="ribbon1 text-success-500 pl-4 bg-white leading-[3rem] w-28 top-5">DISCOUNT</span>
                          </div>
                          <div class="ribbon mb-2">
                            <span class="ribbon1 text-danger-500 pl-4 bg-white leading-[3rem] w-32 top-9">NEW
                              OFFERS</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

Scrollspy

Documentation

First heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.


Second heading

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.


Bootstrap

11 mins ago

Hello, world! This is a toast message.
Hello, world! This is a toast message.
Hello, world! This is a toast message.

Forms

We'll never share your email with anyone else.
Default Radio
Another Rdio

Disabled Forms

Documentation

Input Groups

Documentation
@
@example.com
https://example.com/users/
$ .00
With textarea

Fiilled Input

Documentation
@
@

Alertnate Input

Documentation
@
@

Floating Labels

Documentation

Alertnate Float Labels

Documentation

Toggle Button

Documentation
Example Range

Validation

Documentation
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.

Content

Typography