<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>
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
<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>
<div x-show.transition="checkActive('breadcrumbsection')" class="transition-all duration-150 linear " x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" id="breadcrumbsection">
<nav>
<ol class="flex mb-4 text-base text-secondary-600 lg:">
<li>Home</li>
</ol>
</nav>
<nav>
<ol class="flex mb-4 text-base text-secondary-600 lg:">
<li class="pr-2 text-primary-500"><a href="#">Home</a></li>
<span>/</span>
<li class="pl-2">Library</li>
</ol>
</nav>
<nav>
<ol class="flex mb-4 text-base text-secondary-600 lg:">
<li class="pr-2 text-primary-500"><a href="#">Home</a></li><span>/</span>
<li class="px-2 text-primary-500"><a href="#">Library</a></li><span>/</span>
<li class="pl-2">Data</li>
</ol>
</nav>
<nav>
<ol class="flex mb-4 text-base text-secondary-600 lg:">
<li class="pr-2 text-primary-500"><a href="#">Home</a></li><span>></span>
<li class="pl-2">Library</li>
</ol>
</nav>
<nav>
<ol class="flex mb-4 text-base text-secondary-600 lg:">
<li class="text-primary-500 inline-flex items-center"><a href="#">Home</a></li>
<li class="pl-2 inline-flex items-center">
<svg class="w-auto h-4 pr-2 mt-1 text-black" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>Library
</li>
</ol>
</nav>
</div><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>
<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>
<div x-show.transition="checkActive('dropdownssection')" class="transition-all duration-150 linear " x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" id="dropdownssection">
<div class="mt-1 mb-4 flex justify-between items-center flex-wrap">
<div x-data="{ open: false }" class="inline-block">
<button @click="open = ! open" class="btn btn-secondary btn-sm"
type="button">Dropdown Button
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
<ul x-show="open"
class="z-10 py-2 absolute text-left text-secondary-500 bg-white border rounded min-w-36"
@click.outside="open = false" x-transition.duration.500ms>
<li>
<h6 class="block px-4 py-2 mb-0 text-sm text-secondary-600 whitespace-nowrap">Dropdown header</h6>
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
<li>
<hr class="mx-2 mt-1 mb-1 overflow-hidden border-t">
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Separated link</a></li>
</ul>
</div>
<div x-data="{ open: false }" class="inline-block">
<button @click="open = ! open" class="btn btn-secondary"
type="button">Dropdown Button
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
<ul x-show="open"
class="z-10 py-2 absolute text-left text-secondary-500 bg-white border rounded min-w-36"
@click.outside="open = false" x-transition.duration.500ms>
<li>
<h6 class="block px-4 py-2 mb-0 text-sm text-secondary-600 whitespace-nowrap">Dropdown header</h6>
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
<li>
<hr class="mx-2 mt-1 mb-1 overflow-hidden border-t">
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Separated link</a></li>
</ul>
</div>
<div x-data="{ open: false }" class="inline-block">
<button @click="open = ! open"
class="btn btn-secondary btn-lg"
type="button">Dropdown Button
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
<ul x-show="open"
class="z-10 py-2 absolute text-left text-secondary-500 bg-white border rounded min-w-36"
@click.outside="open = false" x-transition.duration.500ms>
<li>
<h6 class="block px-4 py-2 mb-0 text-sm text-secondary-600 whitespace-nowrap ">Dropdown header
</h6>
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
<li>
<hr class="mx-2 mt-1 mb-1 overflow-hidden border-t">
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Separated link</a></li>
</ul>
</div>
</div>
<div>
<div x-data="{ open: false }" class="relative inline-block">
<div class="flex mt-2">
<button
class="inline-block px-5 py-2 text-center 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">Primary</button>
<button type="button" @click="open = ! open"
class="inline-block px-5 py-2 mr-1 text-center text-white transition-all duration-500 ease-in-out bg-primary-500 border border-primary-500 rounded-r shadow-md hover:shadow-xl hover:bg-primary-600 focus:bg-primary-600">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
</div>
<ul x-show="open" @click.outside="open = false" x-transition.duration.500ms
class="z-10 absolute py-2 -right-24 text-secondary-500 bg-white border rounded min-w-36">
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
</ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
<div class="flex mt-2">
<button
class="inline-block px-5 py-2 text-center 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">Secondary</button>
<button type="button" @click="open = ! open"
class="inline-block px-5 py-2 mr-1 text-center 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">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
</div>
<ul x-show="open" @click.outside="open = false" x-transition.duration.500ms
class="z-10 absolute -right-24 py-2 text-left text-secondary-500 bg-white border rounded min-w-36">
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
</ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
<div class="flex mt-2">
<button
class="inline-block px-5 py-2 text-center text-white transition-all duration-500 ease-in-out bg-success-500 border border-success-500 rounded-l shadow-md hover:shadow-xl hover:bg-success-600 focus:bg-success-600">Success</button>
<button type="button" @click="open = ! open"
class="inline-block px-5 py-2 mr-1 text-center text-white transition-all duration-500 ease-in-out bg-success-500 border border-success-500 rounded-r shadow-md hover:shadow-xl hover:bg-success-600 focus:bg-success-600">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
</div>
<ul x-show="open" @click.outside="open = false" x-transition.duration.500ms
class="z-10 absolute -right-24 py-2 text-left text-secondary-500 bg-white border rounded min-w-36">
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
</ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
<div class="flex mt-2">
<button type="button"
class="inline-block px-5 py-2 text-center text-white transition-all duration-500 ease-in-out border rounded-l shadow-md bg-info-500 border-info-500 hover:shadow-xl hover:bg-info-600 focus:bg-info-600">Info</button>
<button type="button"
class="inline-block px-5 py-2 mr-1 text-center text-white transition-all duration-500 ease-in-out border rounded-r shadow-md bg-info-500 border-info-500 hover:shadow-xl hover:bg-info-600 focus:bg-info-600"
@click="open = ! open">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
</div>
<ul x-show="open" @click.outside="open = false" x-transition.duration.500ms
class="z-10 absolute -right-24 py-2 text-left text-secondary-500 bg-white border rounded min-w-36">
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
</ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
<div class="flex mt-2">
<button type="button"
class="inline-block px-5 py-2 text-center text-white transition-all duration-500 ease-in-out bg-warning-500 border border-warning-500 rounded-l shadow-md hover:shadow-xl hover:bg-warning-600 focus:bg-warning-600">Warning</button>
<button type="button"
class="inline-block px-5 py-2 mr-1 text-center text-white transition-all duration-500 ease-in-out bg-warning-500 border border-warning-500 rounded-r shadow-md hover:shadow-xl hover:bg-warning-600 focus:bg-warning-600"
@click="open = ! open">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
</div>
<ul x-show="open" @click.outside="open = false" x-transition.duration.500ms
class="z-10 absolute -right-24 py-2 text-left text-secondary-500 bg-white border rounded min-w-36">
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
</ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
<div class="flex mt-2">
<button
class="inline-block px-5 py-2 text-center text-white transition-all duration-500 ease-in-out bg-danger-500 border border-danger-500 rounded-l shadow-md hover:shadow-xl hover:bg-danger-600 focus:bg-danger-600">Danger</button>
<button type="button" @click="open = ! open"
class="inline-block px-5 py-2 mr-1 text-center text-white transition-all duration-500 ease-in-out bg-danger-500 border border-danger-500 rounded-r shadow-md hover:shadow-xl hover:bg-danger-600 focus:bg-danger-600">
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
</div>
<ul x-show="open" @click.outside="open = false" x-transition.duration.500ms
class="z-10 absolute -right-24 py-2 text-left text-secondary-500 bg-white border rounded min-w-36">
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
</ul>
</div>
</div>
<div class="mt-8 flex flex-wrap">
<div x-data="{ open: false }" class="relative inline-block">
<button @click="open = ! open"
class="btn btn-secondary mr-1"
type="button">Dropend button
<svg class="inline-block w-4 h-4 mb-1"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
<path
d="M181.65674,122.34277l-80-80A8.0001,8.0001,0,0,0,88,48V208a8.00018,8.00018,0,0,0,13.65674,5.65723l80-80A8.00034,8.00034,0,0,0,181.65674,122.34277Z">
</path>
</svg>
</button>
<ul x-show="open"
class="z-10 absolute top-0 md:left-44 left-28 ml-3 px-2 text-left text-secondary-500 bg-white border rounded min-w-36"
@click.outside="open = false" x-transition.duration.500ms>
<li>
<h6 class="block px-4 py-1 mb-0 text-sm text-secondary-600 whitespace-nowrap">Dropdown header</h6>
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
<li>
<hr class="mx-2 overflow-hidden border-t mt-1 mb-1">
</li>
<li><a class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap"
href="#">Separated link</a></li>
</ul>
</div>
<div x-data="{ open: false }" class="relative inline-block mb-2">
<button @click="open = ! open"
class="btn btn-secondary mr-1"
type="button">Dropup button
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 mb-1"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 256 256" fill="currentColor">
<path
d="M213.65674,154.34326l-80-80a8,8,0,0,0-11.31348,0l-80,80A7.99981,7.99981,0,0,0,48,168H208a7.99981,7.99981,0,0,0,5.65674-13.65674Z">
</path>
</svg>
</button>
<ul x-show="open" x-transition.duration.500ms
class="absolute bottom-10 mb-1 py-2 text-left text-secondary-500 bg-white border rounded min-w-36"
@click.outside="open = false">
<li>
<h6 class="block px-4 py-1 mb-0 text-sm text-secondary-600 whitespace-nowrap">Dropdown header</h6>
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
<li>
<hr class="mx-2 overflow-hidden border-t mt-1 mb-1">
</li>
<li><a class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap"
href="#">Separated link</a></li>
</ul>
</div>
<div x-data="{ open: false }" class="relative inline-block">
<button @click="open = ! open"
class="btn btn-secondary"
type="button">
<svg class="inline-block w-4 h-4 mb-1"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
<path
d="M163.06152,40.60889a8.00159,8.00159,0,0,0-8.71826,1.73388l-80,80a8.00034,8.00034,0,0,0,0,11.31446l80,80A8.0001,8.0001,0,0,0,168,208V48A8.00065,8.00065,0,0,0,163.06152,40.60889Z">
</path>
</svg>Dropstart button
</button>
<ul x-show="open" x-transition.duration.500ms
class="absolute md:right-52 right-16 z-10 mr-0.25 top-0 text-left py-2 text-secondary-500 bg-white border rounded min-w-36"
@click.outside="open = false">
<li>
<h6 class="block px-4 py-1 mb-0 text-sm text-secondary-600 whitespace-nowrap">Dropdown header</h6>
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Something else here</a></li>
<li>
<hr class="mx-2 overflow-hidden border-t mt-1 mb-1">
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Separated link</a></li>
</ul>
</div>
</div>
<div class="mb-4">
<div x-data="{ open: false }" class="relative inline-block">
<button @click="open = ! open"
class="btn btn-secondary mt-2"
type="button">End-aligned menu
<svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-5 h-5"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z"></path>
</svg>
</button>
<ul x-show="open"
class="absolute right-4 z-10 text-left py-2 text-secondary-500 bg-white border rounded min-w-36"
@click.outside="open = false" x-transition.duration.500ms>
<li>
<h6 class="block px-4 py-1 mb-0 text-sm text-secondary-600 whitespace-nowrap">Dropdown header</h6>
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Action</a></li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Another action</a></li>
<li>
<hr class="mx-2 overflow-hidden border-t mt-1 mb-1">
</li>
<li><a
class="block w-full px-4 py-1 text-secondary-600 bg-transparent whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500"
href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Go SomewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go SomewhereSome quick example text to build on the card title and make up the bulk of the card's content.
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 label
Some representative placeholder content for First slide
second slide label
Some representative placeholder content for Second 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>
<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>
Some placeholder content in a paragraph.
And some small print.Some placeholder content in a paragraph.
And some muted small print.Some placeholder content in a paragraph.
And some muted small print.
<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>
I will not close if you click outside me. Don't even try to press escape key.
...
<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>
This is some placeholder content the Home tab's
associated content.
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Profile tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Contact tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Home tab's
associated content.
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Profile tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Contact tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
This is some placeholder content the Home tab's
associated content.
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Profile tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Home tab's
associated content.
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Profile tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Contact tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Contact tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Home tab's
associated content.
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Profile tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Contact tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
This is some placeholder content the Contact tab's
associated content. Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other .nav-powered
navigation.
<div class="block" data-tab-content="true" id="navsection">
<nav class="flex flex-wrap bg-white">
<a class="px-4 py-2 text-primary-600" href="#">Active</a>
<a class="px-4 py-2 text-primary-600" href="#">Link</a>
<a class="px-4 py-2 text-primary-600" href="#">Link</a>
<a class="px-4 py-2 text-secondary-500 cursor-pointer" tabindex="-1">Disabled</a>
</nav>
<div class="flex flex-wrap mt-4" id="wrapper-for-text-blue">
<ul class="flex flex-wrap mb-0">
<li>
<a class="inline-block px-4 py-2 cursor-pointer text-center text-white transition-all duration-500 ease-in-out bg-primary-500 rounded "
data-tab-toggle1="text-tab-profile-blue"
onclick="changeAtiveTab(event,'wrapper-for-text-blue','primary','text-tab-profile-blue')">Home</a>
</li>
<li>
<a class="inline-block px-4 py-2 cursor-pointer text-center text-primary-500 transition-all duration-500 ease-in-out bg-white rounded "
data-tab-toggle1="text-tab-settings-blue"
onclick="changeAtiveTab(event,'wrapper-for-text-blue','primary','text-tab-settings-blue')">Profile</a>
</li>
<li>
<a class="inline-block px-4 py-2 cursor-pointer text-center text-primary-500 transition-all duration-500 ease-in-out bg-white rounded "
data-tab-toggle1="text-tab-options-blue"
onclick="changeAtiveTab(event,'wrapper-for-text-blue','primary','text-tab-options-blue')">Contact</a>
</li>
</ul>
<div class="relative flex flex-col w-full min-w-0 mb-6 break-words bg-white ">
<div class="flex-auto px-4 pt-4">
<div class="tab-content tab-space">
<div class="block" data-tab-content1="true" id="text-tab-profile-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Home tab's
associated content.</strong>
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other <code class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content1="true" id="text-tab-settings-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Profile tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content1="true" id="text-tab-options-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Contact tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap mt-4" id="wrapper-for-border-blue">
<ul class="flex flex-wrap mb-0">
<li>
<a class="inline-block px-4 py-2 border-b-4 cursor-pointer text-center text-primary-500 transition-all duration-500 ease-in-out"
data-tab-toggle3="border-tab-profile-blue"
onclick="changeAtiveBorder(event,'wrapper-for-border-blue','primary','border-tab-profile-blue')">Home</a>
</li>
<li>
<a class="inline-block px-4 py-2 border-b-4 cursor-pointer text-center text-primary-500 transition-all duration-500 ease-in-out"
data-tab-toggle3="border-tab-settings-blue"
onclick="changeAtiveBorder(event,'wrapper-for-border-blue','primary','border-tab-settings-blue')">Profile</a>
</li>
<li>
<a class="inline-block px-4 py-2 border-b-4 cursor-pointer text-center text-primary-500 transition-all duration-500 ease-in-out"
data-tab-toggle3="border-tab-options-blue"
onclick="changeAtiveBorder(event,'wrapper-for-border-blue','primary','border-tab-options-blue')">Contact</a>
</li>
</ul>
<div class="relative flex flex-col w-full min-w-0 mb-6 break-words bg-white ">
<div class="flex-auto px-4 pt-4">
<div class="border-content border-space">
<div class="block" data-tab-content3="true" id="border-tab-profile-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Home tab's
associated content.</strong>
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other <code class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content3="true" id="border-tab-settings-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Profile tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content3="true" id="border-tab-options-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Contact tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap" id="wrapperpill-for-text-blue">
<div>
<ul class="flex flex-wrap mb-0 list-none">
<li>
<a class="inline-block px-4 py-2 cursor-pointer text-center text-white transition-all duration-500 ease-in-out bg-primary-500 rounded-full "
data-tab-toggle2="text-tabpill-profile-blue"
onclick="changeAtivepillTab(event,'wrapperpill-for-text-blue','primary','text-tabpill-profile-blue')">Home</a>
</li>
<li>
<a class="inline-block px-4 py-2 cursor-pointer text-center text-primary-500 transition-all duration-500 ease-in-out bg-white rounded-full "
data-tab-toggle2="text-tabpill-settings-blue"
onclick="changeAtivepillTab(event,'wrapperpill-for-text-blue','primary','text-tabpill-settings-blue')">Profile</a>
</li>
<li>
<a class="inline-block px-4 py-2 cursor-pointer text-center text-primary-500 transition-all duration-500 ease-in-out bg-white rounded-full "
data-tab-toggle2="text-tabpill-options-blue"
onclick="changeAtivepillTab(event,'wrapperpill-for-text-blue','primary','text-tabpill-options-blue')">Contact</a>
</li>
</ul>
<div class="relative flex flex-col w-full min-w-0 break-words bg-white ">
<div class="flex-auto px-4 pt-4">
<div class="tab-content">
<div class="block" data-tab-content2="true" id="text-tabpill-profile-blue">
<p class="mb-4 text-secondary-600"> Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche
tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth. </p>
<p class="mb-4 text-secondary-600"> Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. </p>
</div>
<div class="hidden" data-tab-content2="true" id="text-tabpill-settings-blue">
<p class="mb-4 text-secondary-600"> Cosby sweater eu banh mi, qui irure terry richardson
ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american
apparel,
butcher voluptate nisi qui. </p>
</div>
<div class="hidden" data-tab-content2="true" id="text-tabpill-options-blue">
<p class="mb-4 text-secondary-600"> Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche
tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
dreamcatcher synth. </p>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap mt-4" id="wrapper-text-blue">
<ul class="flex flex-wrap mb-0 border border-primary-500 w-full p-1 rounded">
<li>
<a class="inline-flex px-4 py-2 cursor-pointer text-center text-white transition-all duration-500 ease-in-out bg-primary-500 rounded "
data-tab-toggle1="text-profile-blue"
onclick="changeAtiveTab(event,'wrapper-text-blue','primary','text-profile-blue')">
<svg width="20" class="mr-2" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.14373 20.7821V17.7152C9.14372 16.9381 9.77567 16.3067 10.5584 16.3018H13.4326C14.2189 16.3018 14.8563 16.9346 14.8563 17.7152V20.7732C14.8562 21.4473 15.404 21.9951 16.0829 22H18.0438C18.9596 22.0023 19.8388 21.6428 20.4872 21.0007C21.1356 20.3586 21.5 19.4868 21.5 18.5775V9.86585C21.5 9.13139 21.1721 8.43471 20.6046 7.9635L13.943 2.67427C12.7785 1.74912 11.1154 1.77901 9.98539 2.74538L3.46701 7.9635C2.87274 8.42082 2.51755 9.11956 2.5 9.86585V18.5686C2.5 20.4637 4.04738 22 5.95617 22H7.87229C8.19917 22.0023 8.51349 21.8751 8.74547 21.6464C8.97746 21.4178 9.10793 21.1067 9.10792 20.7821H9.14373Z"
fill="currentColor"></path>
</svg>
Home
</a>
</li>
<li>
<a class="inline-flex px-4 py-2 cursor-pointer text-center text-primary-500 transition-all duration-500 ease-in-out bg-white rounded "
data-tab-toggle1="text-settings-blue"
onclick="changeAtiveTab(event,'wrapper-text-blue','primary','text-settings-blue')">
<svg width="20" class="mr-2" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.997 15.1746C7.684 15.1746 4 15.8546 4 18.5746C4 21.2956 7.661 21.9996 11.997 21.9996C16.31 21.9996 19.994 21.3206 19.994 18.5996C19.994 15.8786 16.334 15.1746 11.997 15.1746Z"
fill="currentColor"></path>
<path opacity="0.4"
d="M11.9971 12.5838C14.9351 12.5838 17.2891 10.2288 17.2891 7.29176C17.2891 4.35476 14.9351 1.99976 11.9971 1.99976C9.06008 1.99976 6.70508 4.35476 6.70508 7.29176C6.70508 10.2288 9.06008 12.5838 11.9971 12.5838Z"
fill="currentColor"></path>
</svg>
Profile
</a>
</li>
</ul>
<div class="relative flex flex-col w-full min-w-0 mb-6 break-words bg-white ">
<div class="flex-auto px-4 pt-4">
<div class="tab-content tab-space">
<div class="block" data-tab-content1="true" id="text-profile-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Home tab's
associated content.</strong>
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other <code class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content1="true" id="text-settings-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Profile tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
</div>
</div>
</div>
</div>
<nav class="block bg-white">
<a class="inline-block px-4 py-2 text-center text-white transition-all duration-500 ease-in-out bg-primary-500 rounded-full "
href="#">Active</a>
<a class="px-4 py-2" href="#">Link</a>
<a class="px-4 py-2" href="#">Link</a>
<a class="px-4 py-2 text-secondary-500 cursor-pointer" tabindex="-1">Disabled</a>
</nav>
<div class="flex flex-wrap mt-4" id="wrapper-for-button-blue">
<div class="mb-3 grid grid-cols-4 gap-4 w-full">
<button
class="py-4 grid justify-center items-center cursor-pointer text-center text-slate-400 hover:text-primary-600 transition-all duration-500 ease-in-out rounded-lg bg-secondary-200 focus:bg-primary-500 focus:text-white"
type="button" data-tab-toggle1="button-tab-profile-blue"
onclick="changeAtiveTab(event,'wrapper-for-button-blue','primary','button-tab-profile-blue')">
<svg class=" ml-5 " width="40" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M16.6203 22H7.3797C4.68923 22 2.5 19.8311 2.5 17.1646V11.8354C2.5 9.16894 4.68923 7 7.3797 7H16.6203C19.3108 7 21.5 9.16894 21.5 11.8354V17.1646C21.5 19.8311 19.3108 22 16.6203 22Z"
fill="currentColor"></path>
<path
d="M15.7551 10C15.344 10 15.0103 9.67634 15.0103 9.27754V6.35689C15.0103 4.75111 13.6635 3.44491 12.0089 3.44491C11.2472 3.44491 10.4477 3.7416 9.87861 4.28778C9.30854 4.83588 8.99272 5.56508 8.98974 6.34341V9.27754C8.98974 9.67634 8.65604 10 8.24487 10C7.8337 10 7.5 9.67634 7.5 9.27754V6.35689C7.50497 5.17303 7.97771 4.08067 8.82984 3.26285C9.68098 2.44311 10.7814 2.03179 12.0119 2C14.4849 2 16.5 3.95449 16.5 6.35689V9.27754C16.5 9.67634 16.1663 10 15.7551 10Z"
fill="currentColor"></path>
</svg>
Your Orders
</button>
<button
class="py-4 grid justify-center items-center cursor-pointer text-center text-slate-400 hover:text-primary-600 transition-all duration-500 ease-in-out rounded-lg bg-secondary-200 focus:bg-primary-500 focus:text-white"
type="button" data-tab-toggle1="button-tab-settings-blue"
onclick="changeAtiveTab(event,'wrapper-for-button-blue','primary','button-tab-settings-blue')">
<svg class="ml-6" width="40" viewBox="0 0 40 40" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.2194 4.89463C17.8608 2.7788 22.3367 2.81578 25.9439 4.9915C29.5157 7.21153 31.6866 11.1736 31.6664 15.4358C31.5832 19.6699 29.2555 23.65 26.3458 26.7268C24.6664 28.5107 22.7877 30.0881 20.748 31.4267C20.538 31.5482 20.3079 31.6295 20.0691 31.6667C19.8393 31.6569 19.6155 31.589 19.4179 31.4691C16.304 29.4576 13.5722 26.8901 11.3539 23.8899C9.49763 21.3856 8.44304 18.36 8.33331 15.224C8.3309 10.9538 10.5779 7.01046 14.2194 4.89463ZM16.3236 16.9913C16.9361 18.5014 18.3819 19.4864 19.986 19.4864C21.0368 19.494 22.047 19.0731 22.7913 18.3175C23.5357 17.5619 23.9524 16.5344 23.9487 15.464C23.9543 13.8301 22.9924 12.3539 21.5121 11.7246C20.0318 11.0954 18.325 11.4373 17.1888 12.5906C16.0526 13.7439 15.711 15.4812 16.3236 16.9913Z"
fill="currentColor" />
<ellipse opacity="0.4" cx="20" cy="35" rx="8.33333" ry="1.66667" fill="currentColor" />
</svg>
Your Address
</button>
<button
class="py-4 grid justify-center items-center cursor-pointer text-center text-slate-400 hover:text-primary-600 transition-all duration-500 ease-in-out rounded-lg bg-secondary-200 focus:bg-primary-500 focus:text-white"
type="button" data-tab-toggle1="button-tab-options-blue"
onclick="changeAtiveTab(event,'wrapper-for-button-blue','primary','button-tab-options-blue')">
<svg class="ml-5" width="40" viewBox="0 0 40 40" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M36.6607 13.9585H29.6029C26.3185 13.9643 23.6578 16.5586 23.6518 19.7609C23.6474 22.9705 26.3111 25.5763 29.6029 25.5807H36.6666V26.0906C36.6666 31.6893 33.2726 35 27.5289 35H12.4726C6.72739 35 3.33331 31.6893 3.33331 26.0906V13.8964C3.33331 8.2977 6.72739 5 12.4726 5H27.5229C33.2666 5 36.6607 8.2977 36.6607 13.8964V13.9585ZM11.2326 13.9455H20.6326H20.6385H20.6504C21.3541 13.9427 21.9229 13.3836 21.92 12.6961C21.917 12.01 21.3422 11.4553 20.6385 11.4582H11.2326C10.5333 11.4611 9.96591 12.0143 9.96294 12.6975C9.95998 13.3836 10.5289 13.9427 11.2326 13.9455Z"
fill="currentColor" />
<path opacity="0.4"
d="M26.729 20.4944C27.0775 22.0798 28.4674 23.1951 30.0543 23.1661H35.4708C36.1311 23.1661 36.6666 22.6193 36.6666 21.9434V17.7242C36.6652 17.0497 36.1311 16.5015 35.4708 16.5H29.9268C28.1217 16.5058 26.6638 18.0041 26.6666 19.8505C26.6666 20.0666 26.6879 20.2827 26.729 20.4944"
fill="currentColor" />
<ellipse cx="30" cy="19.8333" rx="1.66667" ry="1.66667" fill="currentColor" />
</svg>
Your Cards
</button>
<button
class="py-4 grid justify-center items-center cursor-pointer text-center text-slate-400 hover:text-primary-600 transition-all duration-500 ease-in-out rounded-lg bg-secondary-200 focus:bg-primary-500 focus:text-white"
type="button" data-tab-toggle1="button-tab-options1-blue"
onclick="changeAtiveTab(event,'wrapper-for-button-blue','primary','button-tab-options1-blue')">
<svg class="ml-1" width="40" viewBox="0 0 40 40" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path
d="M19.9947 25.291C12.8063 25.291 6.66632 26.4243 6.66632 30.9577C6.66632 35.4927 12.768 36.666 19.9947 36.666C27.183 36.666 33.323 35.5343 33.323 30.9993C33.323 26.4643 27.223 25.291 19.9947 25.291"
fill="currentColor" />
<path opacity="0.4"
d="M19.9947 20.9728C24.8913 20.9728 28.8147 17.0478 28.8147 12.1528C28.8147 7.25782 24.8913 3.33282 19.9947 3.33282C15.0997 3.33282 11.1747 7.25782 11.1747 12.1528C11.1747 17.0478 15.0997 20.9728 19.9947 20.9728"
fill="currentColor" />
</svg>
Profile
</button>
</div>
<div class="relative flex flex-col w-full min-w-0 mb-6 break-words bg-white ">
<div class="flex-auto px-2 pt-4">
<div class="tab-content tab-space">
<div class="block" data-tab-content1="true" id="button-tab-profile-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Home tab's
associated content.</strong>
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other <code class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content1="true" id="button-tab-settings-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Profile tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content1="true" id="button-tab-options-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Contact tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content1="true" id="button-tab-options1-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Contact tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex mt-4 gap-4" id="wrapper-button-blue">
<div class="flex flex-col mb-3 pt-4 gap-4">
<button
class="py-4 px-5 cursor-pointer grid justify-center items-center text-slate-400 hover:text-primary-600 transition-all duration-500 ease-in-out rounded-lg bg-secondary-200 focus:bg-primary-500 focus:text-white"
type="button" data-tab-toggle1="button-profile-blue"
onclick="changeAtiveTab(event,'wrapper-button-blue','primary','button-profile-blue')">
<svg class="ml-2" width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.14373 20.7821V17.7152C9.14372 16.9381 9.77567 16.3067 10.5584 16.3018H13.4326C14.2189 16.3018 14.8563 16.9346 14.8563 17.7152V20.7732C14.8562 21.4473 15.404 21.9951 16.0829 22H18.0438C18.9596 22.0023 19.8388 21.6428 20.4872 21.0007C21.1356 20.3586 21.5 19.4868 21.5 18.5775V9.86585C21.5 9.13139 21.1721 8.43471 20.6046 7.9635L13.943 2.67427C12.7785 1.74912 11.1154 1.77901 9.98539 2.74538L3.46701 7.9635C2.87274 8.42082 2.51755 9.11956 2.5 9.86585V18.5686C2.5 20.4637 4.04738 22 5.95617 22H7.87229C8.19917 22.0023 8.51349 21.8751 8.74547 21.6464C8.97746 21.4178 9.10793 21.1067 9.10792 20.7821H9.14373Z"
fill="currentColor"></path>
</svg>
Home
</button>
<button
class=" py-4 px-5 cursor-pointer grid justify-center items-center text-slate-400 hover:text-primary-600 transition-all duration-500 ease-in-out rounded-lg bg-secondary-200 focus:bg-primary-500 focus:text-white"
type="button" data-tab-toggle1="button-settings-blue"
onclick="changeAtiveTab(event,'wrapper-button-blue','primary','button-settings-blue')">
<svg class="ml-2" width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.997 15.1746C7.684 15.1746 4 15.8546 4 18.5746C4 21.2956 7.661 21.9996 11.997 21.9996C16.31 21.9996 19.994 21.3206 19.994 18.5996C19.994 15.8786 16.334 15.1746 11.997 15.1746Z"
fill="currentColor"></path>
<path opacity="0.4"
d="M11.9971 12.5838C14.9351 12.5838 17.2891 10.2288 17.2891 7.29176C17.2891 4.35476 14.9351 1.99976 11.9971 1.99976C9.06008 1.99976 6.70508 4.35476 6.70508 7.29176C6.70508 10.2288 9.06008 12.5838 11.9971 12.5838Z"
fill="currentColor"></path>
</svg>
Profile
</button>
<button
class=" py-4 px-5 cursor-pointer grid justify-center items-center text-slate-400 hover:text-primary-600 transition-all duration-500 ease-in-out rounded-lg bg-secondary-200 focus:bg-primary-500 focus:text-white"
type="button" data-tab-toggle1="button-options-blue"
onclick="changeAtiveTab(event,'wrapper-button-blue','primary','button-options-blue')">
<svg class="ml-6" width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M12.02 2C6.21 2 2 6.74 2 12C2 13.68 2.49 15.41 3.35 16.99C3.51 17.25 3.53 17.58 3.42 17.89L2.75 20.13C2.6 20.67 3.06 21.07 3.57 20.91L5.59 20.31C6.14 20.13 6.57 20.36 7.081 20.67C8.541 21.53 10.36 21.97 12 21.97C16.96 21.97 22 18.14 22 11.97C22 6.65 17.7 2 12.02 2Z"
fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.9807 13.2901C11.2707 13.2801 10.7007 12.7101 10.7007 12.0001C10.7007 11.3001 11.2807 10.7201 11.9807 10.7301C12.6907 10.7301 13.2607 11.3001 13.2607 12.0101C13.2607 12.7101 12.6907 13.2901 11.9807 13.2901ZM7.37033 13.2901C6.67033 13.2901 6.09033 12.7101 6.09033 12.0101C6.09033 11.3001 6.66033 10.7301 7.37033 10.7301C8.08033 10.7301 8.65033 11.3001 8.65033 12.0101C8.65033 12.7101 8.08033 13.2801 7.37033 13.2901ZM15.3105 12.0101C15.3105 12.7101 15.8805 13.2901 16.5905 13.2901C17.3005 13.2901 17.8705 12.7101 17.8705 12.0101C17.8705 11.3001 17.3005 10.7301 16.5905 10.7301C15.8805 10.7301 15.3105 11.3001 15.3105 12.0101Z"
fill="currentColor"></path>
</svg>
Messages
</button>
<button
class=" py-4 px-5 cursor-pointer grid justify-center items-center text-slate-400 hover:text-primary-600 transition-all duration-500 ease-in-out rounded-lg bg-secondary-200 focus:bg-primary-500 focus:text-white"
type="button" data-tab-toggle1="button-options1-blue"
onclick="changeAtiveTab(event,'wrapper-button-blue','primary','button-options1-blue')">
<svg class="ml-5" width="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.0122 14.8299C10.4077 14.8299 9.10986 13.5799 9.10986 12.0099C9.10986 10.4399 10.4077 9.17993 12.0122 9.17993C13.6167 9.17993 14.8839 10.4399 14.8839 12.0099C14.8839 13.5799 13.6167 14.8299 12.0122 14.8299Z"
fill="currentColor"></path>
<path opacity="0.4"
d="M21.2301 14.37C21.036 14.07 20.76 13.77 20.4023 13.58C20.1162 13.44 19.9322 13.21 19.7687 12.94C19.2475 12.08 19.5541 10.95 20.4228 10.44C21.4447 9.87 21.7718 8.6 21.179 7.61L20.4943 6.43C19.9118 5.44 18.6344 5.09 17.6226 5.67C16.7233 6.15 15.5685 5.83 15.0473 4.98C14.8838 4.7 14.7918 4.4 14.8122 4.1C14.8429 3.71 14.7203 3.34 14.5363 3.04C14.1582 2.42 13.4735 2 12.7172 2H11.2763C10.5302 2.02 9.84553 2.42 9.4674 3.04C9.27323 3.34 9.16081 3.71 9.18125 4.1C9.20169 4.4 9.10972 4.7 8.9462 4.98C8.425 5.83 7.27019 6.15 6.38109 5.67C5.35913 5.09 4.09191 5.44 3.49917 6.43L2.81446 7.61C2.23194 8.6 2.55897 9.87 3.57071 10.44C4.43937 10.95 4.74596 12.08 4.23498 12.94C4.06125 13.21 3.87729 13.44 3.59115 13.58C3.24368 13.77 2.93709 14.07 2.77358 14.37C2.39546 14.99 2.4159 15.77 2.79402 16.42L3.49917 17.62C3.87729 18.26 4.58245 18.66 5.31825 18.66C5.66572 18.66 6.0745 18.56 6.40153 18.36C6.65702 18.19 6.96361 18.13 7.30085 18.13C8.31259 18.13 9.16081 18.96 9.18125 19.95C9.18125 21.1 10.1215 22 11.3069 22H12.6968C13.872 22 14.8122 21.1 14.8122 19.95C14.8429 18.96 15.6911 18.13 16.7029 18.13C17.0299 18.13 17.3365 18.19 17.6022 18.36C17.9292 18.56 18.3278 18.66 18.6855 18.66C19.411 18.66 20.1162 18.26 20.4943 17.62L21.2097 16.42C21.5776 15.75 21.6083 14.99 21.2301 14.37Z"
fill="currentColor"></path>
</svg>
Settings
</button>
</div>
<div class="relative flex flex-col w-full min-w-0 mb-6 break-words bg-white ">
<div class="flex-auto pt-4">
<div class="tab-content tab-space">
<div class="block" data-tab-content1="true" id="button-profile-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Home tab's
associated content.</strong>
Clicking another tab will toggle the visibility of this one for the next. The tab
JavaScript swaps classes to control the content visibility and styling. You can
use it with tabs, pills, and any other <code class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content1="true" id="button-settings-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Profile tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content1="true" id="button-options-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Contact tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
<div class="hidden" data-tab-content1="true" id="button-options1-blue">
<p class="text-secondary-600"><strong>This is some placeholder content the Contact tab's
associated content.</strong> Clicking another tab will toggle the visibility of this one
for the next. The tab JavaScript swaps classes to control the content visibility and
styling. You can use it with tabs, pills, and any other <code
class="text-pink-500">.nav</code>-powered
navigation.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<nav class="bg-secondary-300" x-data="{ selected: null }">
<div class="w-full px-4 sm:px-4 lg:px-4">
<div class="relative flex items-center justify-between h-16">
<div
class="absolute right-0 flex items-center px-3 py-1 text-xl border border-secondary-500 rounded sm:hidden">
<!-- Mobile menu button-->
<button type="button" @click="selected == 1 ? selected = null : selected = 1"
class="inline-flex items-center justify-center text-xl text-secondary-500 rounded"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="black"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex items-center justify-start flex-1 md:justify-center sm:items-stretch">
<a class="flex items-center pt-1.5 pb-1.5 mr-4 text-xl whitespace-nowrap" href="#">
Logo
</a>
<div class="hidden md:flex md:flex-grow">
<ul class="flex items-center mb-2 mr-auto lg:mb-0">
<li>
<a class="block px-2 py-2 text-black" href="#">Home</a>
</li>
<li>
<a class="block px-2 py-2 text-secondary-600" href="#">Link</a>
</li>
<li class="relative inline-block text-left">
<div class="relative mr-4" x-data="{ open: false }">
<a class="dropdown-toggle cursor-pointer flex items-center justify-center w-full pl-4 py-2 text-secondary-600"
@click="open = ! open">
Dropdown
<!-- Heroicon name: solid/chevron-down -->
<svg x-bind:style="open ? 'transform: rotate(180deg)' : ''" viewBox="0 0 20 20"
fill="currentColor" class="w-5 h-5 ml-2 -mr-1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<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" />
</svg>
</a>
<div
class="absolute z-50 py-2 text-left text-secondary-600 bg-white border rounded shadow-md "
@click.outside="open = false" x-show="open" x-transition.duration.500>
<a class="block w-full px-4 py-1 hover:text-primary-500
whitespace-nowrap " href="javascript:void(0);">Action</a>
<a class="block w-full px-4 py-1 hover:text-primary-500
whitespace-nowrap " href="javascript:void(0);">Another action</a>
<hr class="mx-2 overflow-hidden border-secondary-400">
<a class="block w-full px-4 hover:text-primary-500 py-1
whitespace-nowrap " href="javascript:void(0);">Something else here</a>
</div>
</div>
</li>
<li>
<a class="block py-2 text-secondary-500 disabled cursor-pointer" tabindex="-1">Disabled</a>
</li>
<form class="flex px-2 py-2">
<input class="block w-full px-4 py-2 mr-2
placeholder-secondary-500 rounded" type="search" placeholder="Search"
aria-label="Search">
<button
class="inline-block px-6 py-2
text-center text-secondary-900 transition-all duration-500 ease-in-out border border-secondary-900 rounded shadow-md hover:shadow-xl hover:bg-secondary-900 hover:text-white"
type="submit">Search</button>
</form>
</ul>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden transition-all duration-700 max-h-0" style=""
x-ref="container1"
x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
<ul class="mb-2 px-4">
<li class="mb-3">
<a href="#">Home</a>
</li>
<li class="mb-3">
<a href="#">Link</a>
</li>
<li class="mb-3">
<div class="flex items-center" x-data="{ open: false }">
<div x-data="{ open: false }">
<span class="dark:text-primary-300 flex items-center h5 cursor-pointer text-secondary-600 "
@click="open = ! open">dropdown
<svg xmlns="http://www.w3.org/2000/svg"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
class="w-5 h-5" viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z" />
</svg>
</span>
<div
class="absolute z-50 py-2 left-20 text-left text-secondary-600 bg-white border rounded shadow-md dark:bg-zinc-900 dark:border-zinc-900"
@click.outside="open = false" x-show="open" x-transition.duration.500ms>
<a class="block px-4 py-1 whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500 "
href="javascript:void(0);">Action</a>
<a class="block px-4 py-1 whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500 "
href="javascript:void(0);">Another action</a>
<hr class="m-0">
<a class="block px-4 py-1 whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500 "
href="javascript:void(0);">Something else here</a>
</div>
</div>
</div>
</li>
<li class="mb-3" disabled>
<a>Disabled</a>
</li>
<form class="flex py-2">
<input class="block w-full px-4 py-2 mr-2
placeholder-secondary-500 rounded" type="search" placeholder="Search" aria-label="Search">
<button
class="inline-block px-6 py-2
text-center text-secondary-900 transition-all duration-500 ease-in-out border border-secondary-900 rounded shadow-md hover:shadow-xl hover:bg-secondary-900 hover:text-white"
type="submit">Search</button>
</form>
</ul>
</div>
</nav>
</div>
<div class="mt-12">
<nav class="bg-primary-500 rounded" x-data="{ selected: null }">
<div class="w-full px-4 sm:px-4 lg:px-4">
<div class="relative flex items-center justify-between h-16">
<div
class="absolute right-0 flex items-center px-3 py-1 text-xl border border-secondary-500 rounded sm:hidden">
<!-- Mobile menu button-->
<button type="button" @click="selected == 1 ? selected = null : selected = 1"
class="inline-flex items-center justify-center text-xl text-secondary-500 rounded"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex items-center justify-start flex-1 md:justify-center sm:items-stretch">
<a class="pt-1.5 pb-1.5 mr-4 text-xl text-white whitespace-nowrap" href="#">
Logo
</a>
<div class="hidden md:flex md:flex-grow">
<ul class="flex mb-2 ml-auto lg:mb-0">
<li>
<a class="block px-4 py-2 text-white" href="#">Home</a>
</li>
<li>
<a class="block px-4 py-2 text-secondary-400" href="#">Link</a>
</li>
<li class="relative inline-block text-left">
<div class="relative mr-4" x-data="{ open: false }">
<a class="dropdown-toggle cursor-pointer flex items-center justify-center w-full pl-4 py-2 text-secondary-400"
@click="open = ! open">
Dropdown
<!-- Heroicon name: solid/chevron-down -->
<svg x-bind:style="open ? 'transform: rotate(180deg)' : ''" viewBox="0 0 20 20"
fill="currentColor" class="w-5 h-5 ml-2 -mr-1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<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" />
</svg>
</a>
<div
class="absolute z-50 py-2 text-left text-secondary-600 bg-white border rounded shadow-md "
@click.outside="open = false" x-show="open" x-transition.duration.500>
<a class="block hover:text-primary-500 w-full px-4 py-1
whitespace-nowrap " href="javascript:void(0);">Action</a>
<a class="block hover:text-primary-500 w-full px-4 py-1
whitespace-nowrap " href="javascript:void(0);">Another action</a>
<hr class="mx-2 overflow-hidden border-secondary-400">
<a class="block hover:text-primary-500 w-full px-4 py-1
whitespace-nowrap " href="javascript:void(0);">Something else here</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden transition-all duration-700 max-h-0" style=""
x-ref="container1"
x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
<ul class="mb-2 px-4 p-4">
<li class="mb-3 text-white">
<a href="#">Home</a>
</li>
<li class="mb-3 text-[#ffffff8c]">
<a href="#">Link</a>
</li>
<li class="mb-3 text-[#ffffff8c]">
<div class="flex items-center" x-data="{ open: false }">
<div x-data="{ open: false }">
<span class="dark:text-primary-300 flex items-center h5 cursor-pointer"
@click="open = ! open">dropdown
<svg xmlns="http://www.w3.org/2000/svg"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
class="w-5 h-5" viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z" />
</svg>
</span>
<div
class="absolute z-50 py-2 right-0 bottom-5 text-left text-secondary-600 bg-white border rounded shadow-md dark:bg-zinc-900 dark:border-zinc-900"
@click.outside="open = false" x-show="open" x-transition.duration.500ms>
<a class="block px-4 py-1 whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500 "
href="javascript:void(0);">Action</a>
<a class="block px-4 py-1 whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500 "
href="javascript:void(0);">Another action</a>
<hr class="m-0">
<a class="block px-4 py-1 whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500 "
href="javascript:void(0);">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="mt-12">
<nav class="bg-danger-500 rounded" x-data="{ selected: null }">
<div class="w-full px-4 sm:px-3 lg:px-4">
<div class="relative flex items-center justify-between h-16">
<div
class="absolute right-0 flex px-3 py-1 text-xl border border-secondary-500 rounded justify-items-center sm:hidden">
<!-- Mobile menu button-->
<button type="button" @click="selected == 1 ? selected = null : selected = 1"
class="inline-flex items-center justify-center text-xl text-secondary-500 rounded"
aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex items-center justify-start flex-1 md:justify-center sm:items-stretch">
<a class="pt-1.5 pb-1.5 mr-4 text-xl text-white whitespace-nowrap" href="#">
Logo
</a>
<div class="hidden md:flex md:flex-grow">
<ul class="flex mb-2 ml-auto lg:mb-0">
<li>
<a class="block px-4 py-2 text-secondary-400" aria-current="page" href="#">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.2124 7.76241C14.2124 10.4062 12.0489 12.5248 9.34933 12.5248C6.6507 12.5248 4.48631 10.4062 4.48631 7.76241C4.48631 5.11865 6.6507 3 9.34933 3C12.0489 3 14.2124 5.11865 14.2124 7.76241ZM2 17.9174C2 15.47 5.38553 14.8577 9.34933 14.8577C13.3347 14.8577 16.6987 15.4911 16.6987 17.9404C16.6987 20.3877 13.3131 21 9.34933 21C5.364 21 2 20.3666 2 17.9174ZM16.1734 7.84875C16.1734 9.19506 15.7605 10.4513 15.0364 11.4948C14.9611 11.6021 15.0276 11.7468 15.1587 11.7698C15.3407 11.7995 15.5276 11.8177 15.7184 11.8216C17.6167 11.8704 19.3202 10.6736 19.7908 8.87118C20.4885 6.19676 18.4415 3.79543 15.8339 3.79543C15.5511 3.79543 15.2801 3.82418 15.0159 3.87688C14.9797 3.88454 14.9405 3.90179 14.921 3.93246C14.8955 3.97174 14.9141 4.02253 14.9396 4.05607C15.7233 5.13216 16.1734 6.44206 16.1734 7.84875ZM19.3173 13.7023C20.5932 13.9466 21.4317 14.444 21.7791 15.1694C22.0736 15.7635 22.0736 16.4534 21.7791 17.0475C21.2478 18.1705 19.5335 18.5318 18.8672 18.6247C18.7292 18.6439 18.6186 18.5289 18.6333 18.3928C18.9738 15.2805 16.2664 13.8048 15.5658 13.4656C15.5364 13.4493 15.5296 13.4263 15.5325 13.411C15.5345 13.4014 15.5472 13.3861 15.5697 13.3832C17.0854 13.3545 18.7155 13.5586 19.3173 13.7023Z"
fill="#fff"></path>
</svg>
</a>
</li>
<li>
<a class="block px-4 py-2 text-secondary-400" href="#">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.1801 4.41C17.1801 3.08 18.2601 2 19.5901 2C20.9201 2 22.0001 3.08 22.0001 4.41C22.0001 5.74 20.9201 6.82 19.5901 6.82C18.2601 6.82 17.1801 5.74 17.1801 4.41ZM13.33 14.7593L16.22 11.0303L16.18 11.0503C16.34 10.8303 16.37 10.5503 16.26 10.3003C16.151 10.0503 15.91 9.8803 15.651 9.8603C15.38 9.8303 15.111 9.9503 14.95 10.1703L12.531 13.3003L9.76 11.1203C9.59 10.9903 9.39 10.9393 9.19 10.9603C8.991 10.9903 8.811 11.0993 8.69 11.2593L5.731 15.1103L5.67 15.2003C5.5 15.5193 5.58 15.9293 5.88 16.1503C6.02 16.2403 6.17 16.3003 6.34 16.3003C6.571 16.3103 6.79 16.1893 6.93 16.0003L9.44 12.7693L12.29 14.9103L12.38 14.9693C12.7 15.1393 13.1 15.0603 13.33 14.7593ZM15.45 3.7803C15.41 4.0303 15.39 4.2803 15.39 4.5303C15.39 6.7803 17.21 8.5993 19.45 8.5993C19.7 8.5993 19.94 8.5703 20.19 8.5303V16.5993C20.19 19.9903 18.19 22.0003 14.79 22.0003H7.401C4 22.0003 2 19.9903 2 16.5993V9.2003C2 5.8003 4 3.7803 7.401 3.7803H15.45Z"
fill="#fff"></path>
</svg>
</a>
</li>
<li class="relative inline-block text-left ">
<div class="relative mr-4" x-data="{ open: false }">
<a class="flex items-center cursor-pointer w-full pl-4 py-2 text-secondary-400 justify-items-center"
@click="open = ! open">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6.11304 4.5H11.9051C14.3271 4.5 16.0181 6.16904 16.0181 8.56091V15.4391C16.0181 17.831 14.3271 19.5 11.9051 19.5H6.11304C3.69102 19.5 2 17.831 2 15.4391V8.56091C2 6.16904 3.69102 4.5 6.11304 4.5ZM19.958 6.87898C20.397 6.65563 20.912 6.67898 21.331 6.94294C21.75 7.20589 22 7.66274 22 8.16223V15.8384C22 16.3389 21.75 16.7947 21.331 17.0577C21.102 17.2008 20.846 17.2739 20.588 17.2739C20.373 17.2739 20.158 17.2231 19.957 17.1206L18.476 16.3734C17.928 16.0952 17.588 15.5369 17.588 14.9165V9.08305C17.588 8.46173 17.928 7.90335 18.476 7.62721L19.958 6.87898Z"
fill="#fff"></path>
</svg>
<!-- Heroicon name: solid/chevron-down -->
<svg x-bind:style="open ? 'transform: rotate(180deg)' : ''" viewBox="0 0 20 20"
class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</a>
<div
class="absolute z-50 py-2 text-left text-secondary-600 bg-white border rounded shadow-md "
@click.outside="open = false" x-show="open" x-transition.duration.500>
<a class="block hover:text-primary-500 w-full px-4 py-1
whitespace-nowrap " href="javascript:void(0);">Action</a>
<a class="block hover:text-primary-500 w-full px-4 py-1
whitespace-nowrap " href="javascript:void(0);">Another action</a>
<hr class="mx-2 overflow-hidden border-secondary-400">
<a class="block hover:text-primary-500 w-full px-4 py-1
whitespace-nowrap " href="javascript:void(0);">Something else here</a>
</div>
</div>
<div class="absolute left-0 block mt-1 origin-top-right top-full">
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="relative overflow-hidden transition-all duration-700 max-h-0" style=""
x-ref="container1"
x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
<ul class="mb-2 text-white px-4 p-4">
<li class="mb-3">
<a href="#"><svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.2124 7.76241C14.2124 10.4062 12.0489 12.5248 9.34933 12.5248C6.6507 12.5248 4.48631 10.4062 4.48631 7.76241C4.48631 5.11865 6.6507 3 9.34933 3C12.0489 3 14.2124 5.11865 14.2124 7.76241ZM2 17.9174C2 15.47 5.38553 14.8577 9.34933 14.8577C13.3347 14.8577 16.6987 15.4911 16.6987 17.9404C16.6987 20.3877 13.3131 21 9.34933 21C5.364 21 2 20.3666 2 17.9174ZM16.1734 7.84875C16.1734 9.19506 15.7605 10.4513 15.0364 11.4948C14.9611 11.6021 15.0276 11.7468 15.1587 11.7698C15.3407 11.7995 15.5276 11.8177 15.7184 11.8216C17.6167 11.8704 19.3202 10.6736 19.7908 8.87118C20.4885 6.19676 18.4415 3.79543 15.8339 3.79543C15.5511 3.79543 15.2801 3.82418 15.0159 3.87688C14.9797 3.88454 14.9405 3.90179 14.921 3.93246C14.8955 3.97174 14.9141 4.02253 14.9396 4.05607C15.7233 5.13216 16.1734 6.44206 16.1734 7.84875ZM19.3173 13.7023C20.5932 13.9466 21.4317 14.444 21.7791 15.1694C22.0736 15.7635 22.0736 16.4534 21.7791 17.0475C21.2478 18.1705 19.5335 18.5318 18.8672 18.6247C18.7292 18.6439 18.6186 18.5289 18.6333 18.3928C18.9738 15.2805 16.2664 13.8048 15.5658 13.4656C15.5364 13.4493 15.5296 13.4263 15.5325 13.411C15.5345 13.4014 15.5472 13.3861 15.5697 13.3832C17.0854 13.3545 18.7155 13.5586 19.3173 13.7023Z"
fill="#fff"></path>
</svg></a>
</li>
<li class="mb-3">
<a href="#"><svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.1801 4.41C17.1801 3.08 18.2601 2 19.5901 2C20.9201 2 22.0001 3.08 22.0001 4.41C22.0001 5.74 20.9201 6.82 19.5901 6.82C18.2601 6.82 17.1801 5.74 17.1801 4.41ZM13.33 14.7593L16.22 11.0303L16.18 11.0503C16.34 10.8303 16.37 10.5503 16.26 10.3003C16.151 10.0503 15.91 9.8803 15.651 9.8603C15.38 9.8303 15.111 9.9503 14.95 10.1703L12.531 13.3003L9.76 11.1203C9.59 10.9903 9.39 10.9393 9.19 10.9603C8.991 10.9903 8.811 11.0993 8.69 11.2593L5.731 15.1103L5.67 15.2003C5.5 15.5193 5.58 15.9293 5.88 16.1503C6.02 16.2403 6.17 16.3003 6.34 16.3003C6.571 16.3103 6.79 16.1893 6.93 16.0003L9.44 12.7693L12.29 14.9103L12.38 14.9693C12.7 15.1393 13.1 15.0603 13.33 14.7593ZM15.45 3.7803C15.41 4.0303 15.39 4.2803 15.39 4.5303C15.39 6.7803 17.21 8.5993 19.45 8.5993C19.7 8.5993 19.94 8.5703 20.19 8.5303V16.5993C20.19 19.9903 18.19 22.0003 14.79 22.0003H7.401C4 22.0003 2 19.9903 2 16.5993V9.2003C2 5.8003 4 3.7803 7.401 3.7803H15.45Z"
fill="#fff"></path>
</svg></a>
</li>
<li class="mb-3">
<div class="flex items-center" x-data="{ open: false }">
<div x-data="{ open: false }">
<span class="dark:text-primary-300 flex items-center h5 cursor-pointertext-white"
@click="open = ! open"><svg width="32" height="32" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M6.11304 4.5H11.9051C14.3271 4.5 16.0181 6.16904 16.0181 8.56091V15.4391C16.0181 17.831 14.3271 19.5 11.9051 19.5H6.11304C3.69102 19.5 2 17.831 2 15.4391V8.56091C2 6.16904 3.69102 4.5 6.11304 4.5ZM19.958 6.87898C20.397 6.65563 20.912 6.67898 21.331 6.94294C21.75 7.20589 22 7.66274 22 8.16223V15.8384C22 16.3389 21.75 16.7947 21.331 17.0577C21.102 17.2008 20.846 17.2739 20.588 17.2739C20.373 17.2739 20.158 17.2231 19.957 17.1206L18.476 16.3734C17.928 16.0952 17.588 15.5369 17.588 14.9165V9.08305C17.588 8.46173 17.928 7.90335 18.476 7.62721L19.958 6.87898Z"
fill="#fff"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
x-bind:style="open ? 'transform: rotate(180deg);transition-duration: 500ms' : 'transform: -rotate(180deg);transition-duration: 500ms'"
class="w-5 h-5" viewBox="0 0 512 512" fill="currentColor">
<path d="M128 192l128 128 128-128z" />
</svg>
</span>
<div
class="absolute z-50 py-2 left-20 bottom-10 text-left text-secondary-600 bg-white border rounded shadow-md dark:bg-zinc-900 dark:border-zinc-900"
@click.outside="open = false" x-show="open" x-transition.duration.500>
<a class="block px-4 py-1 whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500 "
href="javascript:void(0);">This Week</a>
<a class="block px-4 py-1 whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500 "
href="javascript:void(0);">This Month</a>
<a class="block px-4 py-1 whitespace-nowrap hover:text-primary-500 focus:text-white focus:bg-primary-500 "
href="javascript:void(0);">This Year</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
<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">×</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">×</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">×</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">×</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">×</a>
</div>
<p class="p-3 text-secondary-500">....</p>
</nav>
</div><!-- End Mobile menu -->
</div>
</div>
</div>
</div>
<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>
<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>
<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>
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.
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.
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.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.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.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.
<div class="anyipsum-output slides overflow-y-auto mt-2 h-48">
<section id="scrollspyHeading1">
<p class="font-medium text-xl text-secondary-900">First heading</hp>
<p class="text-secondary-500 mb-4">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.</p>
</section><br>
<section id="scrollspyHeading2">
<h5 class="font-medium text-xl text-secondary-900"> Second heading</h5>
<p class="text-secondary-500 mb-4">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.</p>
</section><br>
<section id="dropdown">
<section id="scrollspyHeading3">
<h5 class="font-medium text-xl text-secondary-900">Third heading</h5>
<p class="text-secondary-500 mb-4">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.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.</p>
</section><br>
<section id="scrollspyHeading4">
<h5 class="font-medium text-xl text-secondary-900"> Fourth heading</h5>
<p class="text-secondary-500 mb-4">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.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.</p>
</section><br>
<section id="scrollspyHeading5">
<h5 class="font-medium text-xl text-secondary-900"> Fifth heading</h5>
<p class="text-secondary-500 mb-4">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.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.</p>
</section>
</section>
</div>
</div>
</div>
<div class="scrollspy flex flex-wrap">
<div class="flex justify-center items-center">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
</div>
<div class="flex justify-center items-center pl-2">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary-500"></div>
</div>
<div class="flex justify-center items-center pl-2">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-success-500"></div>
</div>
<div class="flex justify-center items-center pl-2">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-danger-500"></div>
</div>
<div class="flex justify-center items-center pl-2">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-warning-500"></div>
</div>
<div class="flex justify-center items-center pl-2">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-info-500"></div>
</div>
<div class="flex justify-center items-center pl-2">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 stroke-2 border-secondary-500"></div>
</div>
<div class="flex justify-center items-center pl-2">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-black"></div>
</div>
</div>
<div class="flex space-x-2 animate-pulse mt-4">
<div class="w-8 h-8 bg-primary-500 rounded-full"></div>
<div class="w-8 h-8 bg-secondary-500 rounded-full"></div>
<div class="w-8 h-8 bg-success-500 rounded-full"></div>
<div class="w-8 h-8 bg-danger-500 rounded-full"></div>
<div class="w-8 h-8 bg-warning-500 rounded-full"></div>
<div class="w-8 h-8 bg-info-500 rounded-full"></div>
<div class="w-8 h-8 bg-secondary-500 rounded-full"></div>
<div class="w-8 h-8 bg-black rounded-full"></div>
</div>
<div class="flex flex-wrap mt-4">
<button class="inline-block px-6 py-2 mb-4 mr-4
text-center text-white bg-primary-300 border border-primary-300 rounded shadow-md " disabled="">
<div class="flex justify-center items-center">
<div class="animate-spin rounded-full h-3 w-3 border-b-2 border-white"></div>
</div>
</button>
<button class="flex justify-center items-center px-6 py-2 mb-4 mr-4
text-center text-white bg-primary-300 border border-primary-300 rounded shadow-md " disabled="">
<div class="flex justify-center items-center">
<div class="animate-spin rounded-full h-3 w-3 border-b-2 border-white"></div>
</div><span class="mx-2
">Loading...</span>
</button>
<button class="inline-block px-6 py-2 mb-4 mr-4
text-center text-white bg-primary-300 border border-primary-300 rounded shadow-md " disabled="">
<div class="animate-pulse">
<div class="w-3 h-3 bg-white rounded-full"></div>
</div>
</button>
<button class="flex justify-center items-center px-6 py-2 mb-4 mr-4
text-center text-white bg-primary-300 border border-primary-300 rounded shadow-md " disabled="">
<div class="animate-pulse">
<div class="w-3 h-3 bg-white rounded-full"></div>
</div><span class="mx-2
">Loading...</span>
</button>
</div>
Bootstrap
11 mins ago
<div class="block" data-tab-content="true" id="toastssection">
<div class="flex flex-col">
<div x-data="{show: false }" class="p-12 bg-secondary-900 mt-4 md:w-full">
<div
class="bg-white md:w-3/5 w-full text-secondary-500 flex flex-wrap justify-between items-center py-2 px-4 border-b border-secondary-300 rounded-t">
<p class="font-bold text-secondary-600 flex items-center">
<svg class="rounded bd-placeholder-img mr-2" width="20" height="20"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false">
<rect width="100%" height="100%" fill="#007aff"></rect>
</svg>Bootstrap
</p>
<p class="text-secondary-600 opacity-90 pl-14 text-xs">11 mins ago</p>
<button @click="show = !show"
class="bg-transparent ml-0 outline-none opacity-80 hover:opacity-100 focus:outline-none"
onclick="closeAlert(event)">
<svg class="w-3 h-3" 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 x-show="!show"
class="p-4 md:w-3/5 w-full bg-secondary-200 rounded-b text-sm font-medium text-secondary-500">Hello,
world! This is a toast message.</div>
</div>
<div class="p-12 bg-secondary-900 mt-4 md:w-full">
<div class="p-4 md:w-3/5 w-full flex justify-between bg-secondary-200 rounded text-sm font-medium text-secondary-500">
Hello, world! This is a toast message.
<button class="bg-transparent ml-2 outline-none opacity-80 hover:opacity-100 focus:outline-none"
onclick="closeAlert(event)">
<svg class="w-3 h-3" 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="p-12 bg-secondary-900 mt-4 w-full">
<div
class="px-4 py-4 md:w-3/5 w-full bg-secondary-200 rounded text-sm font-medium text-secondary-500">
Hello, world! This is a toast message.
<hr class="text-black mt-3 mb-3 border-white">
<button
class="inline-block px-6 py-1.5 mb-3 mr text-center text-white bg-primary-500 border border-primary-300 rounded shadow-md focus:bg-primary-600 ">Take
action</button>
<button onclick="closeAlert(event)"
class="inline-block px-6 py-1.5 mb-3 text-center text-white bg-black border border-black rounded shadow-md ">Close</button>
</div>
</div>
</div>
</div>
<div>
<div class="block" data-tab-content="true" id="tooltipssection">
<div class="mt-4 tooltip-demo ">
<button type="button"
class="inline-block px-6 py-2 mb-2 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"
onmouseenter="toggleTooltip(event,'top','tooltipt')"
onmouseleave="toggleTooltip(event,'top','tooltipt')">Tooltip on top</button>
<div id="tooltipt"
class="z-50 hidden w-32 px-2 py-1 text-sm text-center text-white bg-secondary-900 rounded">Tooltip on
top
<svg
class="absolute z-10 w-6 h-6 text-secondary-900 transform translate-x-[2.5rem] -translate-y-2 fill-current stroke-current"
width="8" height="8">
<rect x="12" y="-10" width="12" height="12" transform="rotate(45)" />
</svg>
</div>
<button type="button"
class="inline-block px-6 py-2 mb-2 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"
onmouseenter="toggleTooltip(event,'right','tooltipe')"
onmouseleave="toggleTooltip(event,'right','tooltipe')">Tooltip on end</button>
<div id="tooltipe"
class="hidden w-32 px-2 py-1 text-sm text-center text-white bg-secondary-900 rounded">Tooltip on end
<svg
class="absolute z-10 w-6 h-6 text-secondary-900 transform -translate-x-6 -translate-y-4 fill-current stroke-current"
width="8" height="8">
<rect x="12" y="-10" width="8" height="8" transform="rotate(45)" />
</svg>
</div>
<button type="button"
class="inline-block px-6 py-2 mb-2 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"
onmouseenter="toggleTooltip(event,'bottom','tooltipb')"
onmouseleave="toggleTooltip(event,'bottom','tooltipb')">Tooltip on bottom</button>
<div id="tooltipb"
class="hidden px-2 py-1 text-sm text-center text-white bg-secondary-900 rounded w-36">Tooltip on
bottom
<svg
class="absolute z-10 w-6 h-6 text-secondary-900 transform translate-x-12 -translate-y-8 fill-current stroke-current"
width="8" height="8">
<rect x="12" y="-10" width="12" height="12" transform="rotate(45)" />
</svg>
</div>
<button type="button"
class="inline-block px-6 py-2 mb-2 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"
onmouseenter="toggleTooltip(event,'left','tooltipss')"
onmouseleave="toggleTooltip(event,'left','tooltipss')">Tooltip on start</button>
<div id="tooltipss"
class="hidden w-32 px-2 py-1 z-50 text-sm text-center text-white bg-secondary-900 rounded">Tooltip on
start
<svg
class="absolute z-10 w-6 h-6 text-secondary-900 transform translate-x-[6.5rem] -translate-y-4 fill-current stroke-current"
width="8" height="8">
<rect x="12" y="-10" width="8" height="8" transform="rotate(45)" />
</svg>
</div>
<button type="button"
class="inline-block px-6 py-2 mb-2 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"
onmouseenter="toggleTooltip(event,'top','tooltipw')"
onmouseleave="toggleTooltip(event,'top','tooltipw')">Tooltip with HTML</button>
<div id="tooltipw"
class="hidden px-2 py-1 text-sm text-center text-white bg-secondary-900 rounded w-36">
<span class="z-50"><em>Tooltip</em> <u>with</u> <b>HTML</b></span>
<svg
class="absolute z-10 w-6 h-6 text-secondary-900 transform translate-x-12 -translate-y-2 fill-current stroke-current"
width="8" height="8">
<rect x="12" y="-10" width="12" height="12" transform="rotate(45)" />
</svg>
</div>
</div>
</div>
<div class="block" data-tab-content="true" id="overviewsection">
<div>
<form>
<div class="mb-3">
<label for="disabledTextInput5"
class="inline-block mb-2
text-secondary-500">Email
Address
</label>
<input type="text" id="disabledTextInput5"
class="block w-full px-4 py-2 placeholder-secondary-500 border focus:border-primary-500 focus:shadow rounded outline-none">
<span class="
text-secondary-500 mt-1">We'll never share your email with anyone
else.</span>
</div>
<div class="mb-3">
<label for="disabledTextInput6"
class="inline-block mb-2
text-secondary-500">Password
</label>
<input type="password" id="disabledTextInput6"
class="block w-full px-4 py-2 placeholder-secondary-500 border focus:border-primary-500 focus:shadow rounded outline-none">
</div>
<div class="mb-3 flex items-center">
<input class="float-left w-4 h-4 mr-2 bg-center bg-no-repeat border border-primary-500 rounded"
type="checkbox" value="" id="flexCheckDefault3">
<label class="text-secondary-500
form-check-label" for="flexCheckDefault3">
Check me out
</label>
</div>
</div>
<div class="mb-3">
<label for="TextInput" class="inline-block mb-2 text-2xl
text-secondary-500">Radio Buttons
</label>
<div class="flex items-center">
<input name="radio1" type="radio" class="text-primary-500 border-primary-500 mr-2">
<span class="
text-secondary-500">Default Redio</span>
</div>
<div class="flex items-center">
<input name="radio1" type="radio" class="text-primary-500 border-primary-500 mr-2">
<span class="
text-secondary-500">Another Redio</span>
</div>
</div>
<div class="mb-3">
<label for="" class="inline-block mb-2
text-secondary-500">Upload
</label>
<input type="file" id="choose"
class="block w-full text-xl
border text-secondary-500 rounded outline-none focus:border-primary-400 focus:shadow "
aria-label="Large file input example">
</div>
<div class="mb-3 flex items-center">
<button
class="flex items-center h-5 mr-2 transition duration-300 bg-primary-100 border shadow form-check-input top-5 right-5 w-9 rounded-2xl focus:outline-none"
type="checkbox" id="disabledSwitchCheckChecked" disabled="">
<div
class="w-1 h-1 p-2 ml-6 text-white transition duration-500 transform -translate-x-2 bg-white border border-primary-400 rounded-full md:w-2 md:h-2">
</div>
</button>
<label class="text-secondary-500
form-check-label" for="disabledSwitchCheckChecked">Checked
switch checkbox input</label>
</div>
<div class="mb-3">
<label for="disabledTextInput" class="inline-block mb-2
text-secondary-500">Example
Range
</label>
<div>
<input id="range7" class="range1 rounded-lg overflow-hidden appearance-none bg-primary-100 h-1 w-full"
type="range" min="1" max="100" step="1" value="50" />
</div>
</div>
<button
class="inline-block px-6 py-2 mb-4 mr-4
text-center text-white bg-primary-500 border border-primary-300 rounded shadow-md "
disabled="">Submit</button>
</form>
</div>
<form>
<fieldset>
<div class="mb-3">
<label
class="inline-block mb-2
text-secondary-500">Disabled
input</label>
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 bg-secondary-200 rounded "
disabled placeholder="Disabled input">
</div>
<div class="mb-3">
<label class="inline-block mb-2
text-secondary-500">Disabled
select
menu</label>
<select
class="w-full py-2 pl-4 pr-12 text-secondary-700 bg-secondary-200 rounded ">
<option>Disabled select</option>
</select>
</div>
<div class="mb-3">
<div class="flex items-center form-check">
<input class="w-4 h-4 mr-2" type="checkbox" disabled>
<label class="text-secondary-400 form-check-label">
Can't check this
</label>
</div>
</div>
<fieldset class="mb-3">
<label class="w-full mb-2 text-2xl
text-secondary-500">Disabled radios buttons</label>
<div class="flex items-center form-check">
<input type="radio" name="radios" class="w-4 h-4 mr-2 form-check-input" id="disabledRadio1"
disabled>
<label class="text-secondary-400 form-check-label" for="disabledRadio1">Disabled radio</label>
</div>
<div class="flex items-center mb-3 form-check">
<input type="radio" name="radios" class="w-4 h-4 mr-2 form-check-input" id="disabledRadio2"
disabled>
<label class="text-secondary-400 form-check-label" for="disabledRadio2">Another radio</label>
</div>
</fieldset>
<div class="mb-3">
<label class="inline-block mb-2 font-semibold text-secondary-500"
>Upload</label>
<input type="file"
class="block w-full py-px font-semibold text-secondary-500 bg-secondary-200 border rounded shadow-lg"
disabled>
</div>
<div class="flex items-center mb-3">
<button
class="flex items-center h-5 mr-2 transition duration-300 bg-primary-100 border shadow form-check-input top-5 right-5 w-9 rounded-2xl focus:outline-none"
type="checkbox" disabled>
<div
class="w-1 h-1 p-2 ml-6 text-white transition duration-500 transform -translate-x-2 bg-white border border-primary-400 rounded-full md:w-2 md:h-2">
</div>
</button>
<label class="text-secondary-400 form-check-label" for="disabledSwitchCheckChecked2"> Disabled Checked
switch checkbox
input</label>
</div>
<div class="mb-3">
<label for="customRange3" class="inline-block mb-2 font-semibold text-secondary-500">Disabled
range</label>
<div class="w-full">
<div class="bg-primary-100 h-1 w-full rounded-full shadow relative">
<span
class="bg-white h-4 w-4 absolute border-2 border-primary-500 top-0 -ml-2 -mt-1.5 z-10 drop-shadow-xl rounded-full cursor-pointer"
style="left: 50%"></span>
<span class="bg-primary-100 h-1 absolute left-0 top-0 shadow rounded-full"
style="width: 50%"></span>
</div>
<div class="flex justify-between mt-2 text-xs text-secondary-600"></div>
</div>
</div>
<button
class="inline-block px-6 py-2 mb-4 mr-4
text-center text-white bg-primary-300 border border-primary-300 rounded shadow-md "
disabled>Submit</button>
</fieldset>
</form>
<div class="block" data-tab-content="true" id="sizingsection">
<input
class="mb-3 block w-full px-8 py-3 border placeholder-secondary-400 placeholder-text-xl rounded outline-none focus:border-primary-400 focus:shadow text-lg font-medium"
type="text" placeholder=".form-control-lg">
<div class="mb-3">
<select class="inline-block w-full py-3 px-8 mb-3 text-xl
text-secondary-500 bg-white border rounded outline-none focus:border-primary-400 focus:shadow ">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<input type="file" id="choose"
class="mb-3 block w-full text-xl border text-secondary-500 rounded outline-none focus:border-primary-400 focus:shadow ">
<div class="mt-4">
<input
class="mb-3 block w-full px-4 py-1 placeholder-secondary-500 border rounded outline-none focus:border-primary-400 focus:shadow "
type="text" placeholder=".form-control-sm">
<div class="mb-3">
<select
class="inline-block w-full py-1 px-4 bg-white text-secondary-500 border rounded outline-none focus:border-primary-400 focus:shadow ">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<input type="file" id="choose1"
class="mb-3 block w-full px py text-sm border rounded outline-none focus:border-primary-400 focus:shadow ">
</div>
</div>
<div class="block" data-tab-content="true" id="inputgroupsection">
<div>
<div class="relative flex items-stretch w-full mb-3 ">
<span
class="flex items-center px-4 py-2 font-semibold text-secondary-500 border-t border-b border-l rounded whitespace-nowrap"
id="basic-addon1">@</span>
<input type="text"
class="block w-full px-4 py-2 font-semibold placeholder-secondary-500 border outline-none focus:border-primary-400 focus:shadow "
placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text"
class="block w-full px-4 py-2 font-semibold placeholder-secondary-500 border rounded outline-none focus:border-primary-400 focus:shadow "
placeholder="Recipient's username" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<span
class="flex items-center px-4 py-2 font-semibold text-secondary-500 border-t border-b border-r rounded whitespace-nowrap"
id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="inline-block mb-2 font-semibold text-secondary-500">Your vanity
URL</label>
<div class="relative flex items-stretch w-full mb-3">
<span
class="flex items-center px-4 py-2 font-semibold text-secondary-500 border-t border-b border-l rounded whitespace-nowrap"
id="basic-addon3">https://example.com/users/</span>
<input type="text"
class="block w-full px-4 py-2 border outline-none focus:border-primary-400 focus:shadow "
id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="relative flex items-stretch w-full mb-3">
<span
class="flex items-center px-4 py-2 font-semibold text-secondary-500 border-t border-b border-l rounded-l whitespace-nowrap">$</span>
<input type="text"
class="block w-full px-4 py-2 border outline-none focus:border-primary-400 focus:shadow "
aria-label="Amount (to the nearest dollar)">
<span
class="flex items-center px-4 py-2 font-semibold text-secondary-500 border-t border-b border-r rounded-r">.00</span>
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<span
class="flex items-center px-4 py-2 font-semibold text-secondary-500 border-t border-b border-l rounded whitespace-nowrap">With
textarea</span>
<textarea
class="block w-full px-4 py-2 border outline-none focus:border-primary-400 focus:shadow "
aria-label="With textarea"></textarea>
</div>
</div>
</div>
<div class="block" data-tab-content="true" id="alertnatesection">
<div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 rounded shadow-sm outline-none focus:border-primary-400"
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3 rounded shadow-sm">
<span
class="flex items-center px-2 py-2 font-semibold text-secondary-500 rounded whitespace-nowrap"
id="basic-addon1">@</span>
<input type="text" class="block w-full px-2 py-2 placeholder-secondary-600 outline-none "
placeholder="Addon" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3 rounded shadow-sm">
<input type="text"
class="block w-full px-2 py-2 placeholder-secondary-600 outline-none focus:border-primary-400"
placeholder="Addon" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="flex items-center px-2 py-2 font-semibold text-secondary-500 whitespace-nowrap"
id="basic-addon2">@</span>
</div>
<div class="relative flex items-stretch w-full mb-3">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 border-b rounded shadow-sm outline-none border-success-200 is-valid focus:border-primary-400 "
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 rounded shadow-sm outline-none is-invalid border-b border-danger-200 focus:border-primary-400"
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 border border-success-500 rounded shadow outline-none is-valid focus:border-success-400 focus:shadow"
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 border border-danger-500 rounded shadow outline-none is-invalid focus:border-danger-400 focus:shadow "
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1"
style="background-image:data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c03221'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c03221' stroke='none'/%3e%3c/svg%3e">
</div>
</div>
</div>
<div class="block" data-tab-content="true" id="alertnatesection">
<div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 rounded shadow-sm outline-none focus:border-primary-400"
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3 rounded shadow-sm">
<span
class="flex items-center px-2 py-2 font-semibold text-secondary-500 rounded whitespace-nowrap"
id="basic-addon1">@</span>
<input type="text" class="block w-full px-2 py-2 placeholder-secondary-600 outline-none "
placeholder="Addon" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3 rounded shadow-sm">
<input type="text"
class="block w-full px-2 py-2 placeholder-secondary-600 outline-none focus:border-primary-400"
placeholder="Addon" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="flex items-center px-2 py-2 font-semibold text-secondary-500 whitespace-nowrap"
id="basic-addon2">@</span>
</div>
<div class="relative flex items-stretch w-full mb-3">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 border-b rounded shadow-sm outline-none border-success-200 is-valid focus:border-primary-400 "
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 rounded shadow-sm outline-none is-invalid border-b border-danger-200 focus:border-primary-400"
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 border border-success-500 rounded shadow outline-none is-valid focus:border-success-400 focus:shadow"
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text"
class="block w-full px-4 py-2 placeholder-secondary-600 border border-danger-500 rounded shadow outline-none is-invalid focus:border-danger-400 focus:shadow "
placeholder="Enter Text" aria-label="Username" aria-describedby="basic-addon1"
style="background-image:data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c03221'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c03221' stroke='none'/%3e%3c/svg%3e">
</div>
</div>
</div>
<div class="block" data-tab-content="true" id="floatingsection">
<div class="relative flex items-stretch w-full mb-3 ">
<input type="email" autocomplete="off"
class="peer placeholder-transparent block w-full p-3 pt-6 rounded outline-none border text-secondary-600 focus:shadow focus:border-primary-400"
placeholder="Email address" name="email">
<label for=" email"
class="absolute left-4 top-1 text-secondary-500 font-semibold text-base transition-all peer-placeholder-shown: peer-placeholder-shown:text-secondary-500 peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:font-semibold peer-focus:text-secondary-500 peer-focus:text-sm ">Email
address</label>
</div>
<div class="relative flex items-stretch w-full mb-3">
<input type="password" autocomplete="off"
class="peer placeholder-transparent block w-full p-3 pt-6 rounded outline-none border text-secondary-600 focus:shadow focus:border-primary-400"
placeholder="Password" name="password">
<label for="password"
class="absolute left-4 top-1 text-secondary-500 font-semibold text-base transition-all peer-placeholder-shown: peer-placeholder-shown:text-secondary-500 peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:font-semibold peer-focus:text-secondary-500 peer-focus:text-sm ">Password</label>
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text"
class="block w-full p-4 bg-secondary-200 rounded placeholder-secondary-500 font-semibold"
placeholder="Regular" disabled="disabled">
</div>
<div class="relative flex items-stretch w-full mb-3">
<input type="text" autocomplete="off"
class="peer placeholder-transparent block w-full p-3 pt-6 outline-none border text-secondary-600 focus:shadow focus:border-primary-400 border-success-500 rounded is-valid"
placeholder="Regular" name="regular">
<label for=" regular"
class="absolute left-4 top-1 text-secondary-500 font-semibold text-base transition-all peer-placeholder-shown: peer-placeholder-shown:text-secondary-500 peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:font-semibold peer-focus:text-secondary-500 peer-focus:text-sm ">Regular</label>
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text" autocomplete="off"
class="peer placeholder-transparent block w-full p-3 pt-6 text-secondary-600 focus:shadow focus:border-primary-400 border border-danger-500 rounded outline-none is-invalid"
placeholder="Regular"
style=" background-image:data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c03221' %3e%3ccircle cx='6' cy='6' r='4.5' /%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z' /%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c03221' stroke='none' /%3e%3c/svg%3e">
<label for="regular"
class="absolute left-4 top-1 text-secondary-500 font-semibold text-base transition-all peer-placeholder-shown: peer-placeholder-shown:text-secondary-500 peer-placeholder-shown:top-4 peer-focus:top-1 peer-focus:font-semibold peer-focus:text-secondary-500 peer-focus:text-sm ">Regular</label>
</div>
</div>
<div class="block" data-tab-content="true" id="alertfloatingsection">
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text" autocomplete="off"
class="peer placeholder-transparent block w-full p-3 rounded outline-none border text-secondary-600 focus:shadow focus:border-primary-400"
placeholder="Small" name="Small">
<label for=" small"
class="absolute left-4 -top-3 bg-white px-1 text-secondary-600 text-lg peer-focus:px-2 font-semibold peer-placeholder-shown: peer-placeholder-shown:text-secondary-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-secondary-700 peer-focus:bg-white peer-focus:left-2 peer-focus:text-sm peer-focus: peer-focus:-top-3">Small</label>
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text" autocomplete="off"
class="peer placeholder-transparent block w-full p-4 rounded outline-none border text-secondary-600 focus:shadow focus:border-primary-400"
placeholder="Regular" name="Regular">
<label for=" Regular"
class="absolute left-4 -top-3 bg-white px-1 text-secondary-600 text-lg peer-focus:px-2 font-semibold peer-placeholder-shown: peer-placeholder-shown:text-secondary-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-secondary-700 peer-focus:bg-white peer-focus:left-2 peer-focus:text-sm peer-focus: peer-focus:-top-3">Regular</label>
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text" autocomplete="off"
class="peer placeholder-transparent block w-full p-5 rounded outline-none border text-secondary-600 focus:shadow focus:border-primary-400"
placeholder="Large" name="Large">
<label for=" Large"
class="absolute left-4 -top-3 bg-white px-1 text-secondary-600 text-lg peer-focus:px-2 font-semibold peer-placeholder-shown: peer-placeholder-shown:text-secondary-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-secondary-700 peer-focus:bg-white peer-focus:left-2 peer-focus:text-sm peer-focus: peer-focus:-top-3">Large</label>
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text"
class="block w-full p-4 bg-secondary-200 rounded placeholder-secondary-500 font-semibold text-lg"
placeholder="Regular" disabled="disabled">
</div>
<div class="relative flex items-stretch w-full mb-3">
<input type="text" autocomplete="off"
class="peer placeholder-transparent block w-full p-4 outline-none border text-secondary-600 focus:shadow border-success-500 rounded is-valid"
placeholder="Regular" name="regular">
<label for=" regular"
class="absolute left-4 -top-3 bg-white px-1 text-secondary-600 text-lg peer-focus:px-2 font-semibold peer-placeholder-shown: peer-placeholder-shown:text-secondary-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-secondary-700 peer-focus:bg-white peer-focus:left-2 peer-focus:text-sm peer-focus: peer-focus:-top-3">Regular</label>
</div>
<div class="relative flex items-stretch w-full mb-3 ">
<input type="text" autocomplete="off"
class="peer placeholder-transparent block w-full p-4 text-secondary-600 focus:shadow border border-danger-500 rounded outline-none is-invalid"
placeholder="Regular"
style=" background-image:data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23c03221' %3e%3ccircle cx='6' cy='6' r='4.5' /%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z' /%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23c03221' stroke='none' /%3e%3c/svg%3e">
<label for="regular"
class="absolute left-4 -top-3 bg-white px-1 text-secondary-600 text-lg peer-focus:px-2 font-semibold peer-placeholder-shown: peer-placeholder-shown:text-secondary-500 peer-placeholder-shown:top-4 transition-all peer-focus:text-secondary-700 peer-focus:bg-white peer-focus:left-2 peer-focus:text-sm peer-focus: peer-focus:-top-3">Regular</label>
</div>
</div>
</div>
<div class="block" data-tab-content="true" id="togglesection">
<div class="flex flex-wrap items-center">
<div class="mr-4 flex items-center">
<input type="checkbox" name="remember"
class="w-4 h-4 border border-primary-300 rounded-sm outline-none cursor-pointer" />
<label class="ml-2 text-lg text-secondary-600" for="email">Checkbox</label>
</div>
<div class="mr-4 flex items-center">
<input type="checkbox" name="remember"
class="w-4 h-4 border border-primary-300 rounded-sm outline-none cursor-pointer" checked />
<label class="ml-2 text-lg text-secondary-600" for="email">Checked</label>
</div>
<div class="mr-4 flex items-center">
<input type="checkbox" name="remember"
class="w-4 h-4 border border-primary-300 rounded-sm outline-none cursor-pointer" disabled />
<label class="ml-2 text-lg text-secondary-500" for="email">Disabled</label>
</div>
<div class="mr-4 flex items-center">
<input type="checkbox" name="remember"
class="w-4 h-4 border border-primary-300 rounded-sm outline-none cursor-pointer" checked disabled />
<label class="ml-2 text-lg text-secondary-500" for="email">Disabled Checked</label>
</div>
</div>
<div class="flex flex-wrap items-center mt-4">
<div class="mr-4 flex items-center">
<input name="select" type="radio"
class="w-4 h-4 border border-secondary-300 rounded-full outline-none cursor-pointer" value="male"
checked />
<label class="ml-2 text-lg text-secondary-600" for="male">Active</label>
</div>
<div class="mr-4 flex items-center">
<input name="select" type="radio"
class="w-4 h-4 border border-secondary-300 rounded-full outline-none cursor-pointer" value="male"
unchecked />
<label class="ml-2 text-lg text-secondary-600" for="male">Inactive</label>
</div>
<div class="mr-4 flex items-center">
<input name="select1" type="radio"
class="w-4 h-4 border border-secondary-300 rounded-full outline-none cursor-pointer" value="male"
checked disabled />
<label class="ml-2 text-lg text-secondary-500" for="male">Active - Disabled</label>
</div>
<div class="mr-4 flex items-center">
<input name="select1" type="radio"
class="w-4 h-4 border border-secondary-300 rounded-full outline-none cursor-pointer" value="male"
disabled />
<label class="ml-2 text-lg text-secondary-500" for="male">Inactive - Disabled</label>
</div>
</div>
<div class="flex flex-wrap items-center mt-4">
<div class="mr-4 flex items-center">
<label class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<input id="toogleButton" type="checkbox" class="hidden" />
<!-- path -->
<div class="toggle-path bg-secondary-200 w-9 h-5 rounded-full shadow-inner"></div>
<!-- crcle -->
<div class="toggle-circle absolute w-3.5 h-3.5 bg-white rounded-full shadow inset-y-0 left-0">
</div>
</div>
<div class="ml-2 text-lg text-secondary-600">Off Switch</div>
</label>
</div>
<div class="mr-4 flex items-center">
<label class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<input id="toogleButton" checked type="checkbox" class="hidden" />
<!-- path -->
<div class="toggle-path bg-secondary-200 w-9 h-5 rounded-full shadow-inner"></div>
<!-- crcle -->
<div class="toggle-circle absolute w-3.5 h-3.5 bg-white rounded-full shadow inset-y-0 left-0">
</div>
</div>
<div class="ml-2 text-lg text-secondary-600">On Switch</div>
</label>
</div>
<div class="mr-4 flex items-center">
<label class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<input id="toogleButton" disabled type="checkbox" class="hidden" />
<!-- path -->
<div class="toggle-path bg-secondary-200 w-9 h-5 rounded-full shadow-inner"></div>
<!-- crcle -->
<div class="toggle-circle absolute w-3.5 h-3.5 bg-white rounded-full shadow inset-y-0 left-0">
</div>
</div>
<div class="ml-2 text-lg text-secondary-500">Disabled Switch</div>
</label>
</div>
<div class="mr-4 flex items-center">
<label class="flex items-center cursor-pointer">
<!-- toggle -->
<div class="relative">
<input id="toogleButton" disabled checked type="checkbox" class="hidden" />
<!-- path -->
<div class="toggle-path bg-secondary-200 w-9 h-5 rounded-full shadow-inner"></div>
<!-- crcle -->
<div class="toggle-circle absolute w-3.5 h-3.5 bg-white rounded-full shadow inset-y-0 left-0">
</div>
</div>
<div class="ml-2 text-lg text-secondary-500">Switch</div>
</label>
</div>
</div>
<div class="text-lg text-secondary-600 mt-4">Example Range
<div class="w-full my-4"><input id="range7" class="rounded-lg appearance-none bg-primary-100 h-1 w-full"
type="range" min="1" max="100" step="1" value="50"></div>
<div><input id="range1" class="rounded-lg overflow-hidden appearance-none bg-primary-100 h-1 w-full"
type="range" min="1" max="100" step="1" value="50"></div>
<div><input id="range2" class="rounded-lg overflow-hidden appearance-none bg-secondary-100 h-1 w-full"
type="range" min="1" max="100" step="1" value="50" /></div>
<div><input id="range3" class="rounded-lg overflow-hidden appearance-none bg-success-100 h-1 w-full"
type="range" min="1" max="100" step="1" value="50" /></div>
<div><input id="range4" class="rounded-lg overflow-hidden appearance-none bg-danger-100 h-1 w-full"
type="range" min="1" max="100" step="1" value="50" /></div>
<div><input id="range5" class="rounded-lg overflow-hidden appearance-none bg-warning-100 h-1 w-full"
type="range" min="1" max="100" step="1" value="50" /></div>
<div><input id="range6" class="rounded-lg overflow-hidden appearance-none bg-secondary-200 h-1 w-full"
type="range" min="1" max="100" step="1" value="50" /></div>
</div>
</div>
<div class="xl:col-span-6 ">
<div class="p-6 mb-0 overflow-hidden bg-white rounded-lg shadow-lg dark:bg-dark-card ">
<div class="flex justify-end">
<ul class="relative flex flex-wrap p-1 mb-4 bg-white border border-primary-500 dark:bg-dark-card rounded">
<li class="nav-item" role="presentation">
<button class="flex items-center px-4 py-1 text-white bg-primary-500 rounded" type="button"
data-tab-toggle="validationpreviewsection"
onclick="changetabpane(event,'validation','primary','validationpreviewsection')">
<svg width="20" class="me-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M22.4541 11.3918C22.7819 11.7385 22.7819 12.2615 22.4541 12.6082C21.0124 14.1335 16.8768 18 12 18C7.12317 18 2.98759 14.1335 1.54586 12.6082C1.21811 12.2615 1.21811 11.7385 1.54586 11.3918C2.98759 9.86647 7.12317 6 12 6C16.8768 6 21.0124 9.86647 22.4541 11.3918Z"
stroke="currentColor"></path>
<circle cx="12" cy="12" r="3.5" stroke="currentColor"></circle>
<circle cx="13.5" cy="10.5" r="1.5" fill="currentColor"></circle>
</svg>
Preview
</button>
</li>
<li class="nav-item" role="presentation">
<button class="flex items-center px-4 py-1 text-primary-500 rounded" type="button"
data-tab-toggle="validationcodesection"
onclick="changetabpane(event,'validation','primary','validationcodesection')">
<svg width="20" class="me-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 2.00004C4 1.44776 4.44771 1.00004 5 1.00004L13.5721 1C13.8454 1 14.1068 1.11184 14.2955 1.30953L19.7234 6.99588C19.9009 7.18191 20 7.42919 20 7.68636V22C20 22.5523 19.5523 23 19 23H5C4.44772 23 4 22.5523 4 22V2.00004Z"
stroke="currentColor"></path>
<path
d="M4 2C4 1.44772 4.44772 1 5 1H13C13.5523 1 14 1.44772 14 2V6.28566C14 6.83794 14.4477 7.28566 15 7.28566H19C19.5523 7.28566 20 7.73338 20 8.28566V22C20 22.5522 19.5523 23 19 23H5C4.44772 23 4 22.5522 4 22V2Z"
stroke="currentColor"></path>
<mask fill="white">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7 14.5945L8.99429 12.1334C9.12172 11.9761 9.34898 11.9549 9.50189 12.0859C9.6548 12.217 9.67546 12.4507 9.54804 12.6079L7.93828 14.5945L9.54804 16.581C9.67546 16.7383 9.6548 16.972 9.50189 17.103C9.34898 17.2341 9.12172 17.2128 8.99429 17.0556L7 14.5945Z">
</path>
</mask>
<path
d="M7 14.5945L6.22306 13.9649L5.7129 14.5945L6.22306 15.2241L7 14.5945ZM8.99429 12.1334L9.77124 12.7629L9.77124 12.7629L8.99429 12.1334ZM9.50189 12.0859L8.85116 12.8452L8.85116 12.8452L9.50189 12.0859ZM9.54804 12.6079L10.325 13.2375L10.325 13.2375L9.54804 12.6079ZM7.93828 14.5945L7.16134 13.9649L6.65118 14.5945L7.16134 15.2241L7.93828 14.5945ZM9.54804 16.581L10.325 15.9515L10.325 15.9515L9.54804 16.581ZM9.50189 17.103L8.85116 16.3437L8.85116 16.3437L9.50189 17.103ZM8.99429 17.0556L8.21735 17.6852L8.21735 17.6852L8.99429 17.0556ZM10.1526 11.3266C9.5684 10.8259 8.69615 10.9129 8.21735 11.5038L9.77124 12.7629C9.54729 13.0393 9.12956 13.0838 8.85116 12.8452L10.1526 11.3266ZM10.325 13.2375C10.7905 12.663 10.7202 11.813 10.1526 11.3266L8.85116 12.8452C8.5894 12.6209 8.56045 12.2383 8.77109 11.9784L10.325 13.2375ZM8.71522 15.2241L10.325 13.2375L8.77109 11.9784L7.16134 13.9649L8.71522 15.2241ZM10.325 15.9515L8.71522 13.9649L7.16134 15.2241L8.77109 17.2106L10.325 15.9515ZM10.1526 17.8624C10.7202 17.3759 10.7905 16.5259 10.325 15.9515L8.77109 17.2106C8.56045 16.9507 8.5894 16.5681 8.85116 16.3437L10.1526 17.8624ZM8.21735 17.6852C8.69615 18.276 9.5684 18.363 10.1526 17.8624L8.85116 16.3437C9.12956 16.1052 9.5473 16.1497 9.77124 16.426L8.21735 17.6852ZM8.21735 11.5038L6.22306 13.9649L7.77694 15.2241L9.77124 12.7629L8.21735 11.5038ZM6.22306 15.2241L8.21735 17.6852L9.77124 16.426L7.77694 13.9649L6.22306 15.2241Z"
fill="currentColor" mask="url(#path-3-inside-1)"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.771 11.1638C13.9576 11.2542 14.0356 11.4769 13.9451 11.6611L10.9973 17.6664C10.9069 17.8506 10.6823 17.9267 10.4957 17.8363C10.3091 17.7458 10.2311 17.5232 10.3215 17.3389L13.2693 11.3336C13.3598 11.1494 13.5844 11.0733 13.771 11.1638Z"
fill="currentColor"></path>
<mask fill="white">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17 14.5945L15.0057 17.0556C14.8783 17.2128 14.651 17.2341 14.4981 17.103C14.3452 16.972 14.3245 16.7383 14.452 16.581L16.0617 14.5945L14.452 12.6079C14.3245 12.4507 14.3452 12.217 14.4981 12.0859C14.651 11.9549 14.8783 11.9761 15.0057 12.1334L17 14.5945Z">
</path>
</mask>
<path
d="M17 14.5945L17.7769 15.2241L18.2871 14.5945L17.7769 13.9649L17 14.5945ZM15.0057 17.0556L14.2288 16.426L14.2288 16.426L15.0057 17.0556ZM14.4981 17.103L15.1488 16.3437L15.1488 16.3437L14.4981 17.103ZM14.452 16.581L13.675 15.9515L13.675 15.9515L14.452 16.581ZM16.0617 14.5945L16.8387 15.2241L17.3488 14.5945L16.8387 13.9649L16.0617 14.5945ZM14.452 12.6079L13.675 13.2375L13.675 13.2375L14.452 12.6079ZM14.4981 12.0859L15.1488 12.8452L15.1488 12.8452L14.4981 12.0859ZM15.0057 12.1334L15.7826 11.5038L15.7826 11.5038L15.0057 12.1334ZM13.8474 17.8624C14.4316 18.363 15.3039 18.276 15.7826 17.6852L14.2288 16.426C14.4527 16.1497 14.8704 16.1052 15.1488 16.3437L13.8474 17.8624ZM13.675 15.9515C13.2095 16.5259 13.2798 17.3759 13.8474 17.8624L15.1488 16.3437C15.4106 16.5681 15.4396 16.9507 15.2289 17.2106L13.675 15.9515ZM15.2848 13.9649L13.675 15.9515L15.2289 17.2106L16.8387 15.2241L15.2848 13.9649ZM13.675 13.2375L15.2848 15.2241L16.8387 13.9649L15.2289 11.9784L13.675 13.2375ZM13.8474 11.3266C13.2798 11.813 13.2095 12.663 13.675 13.2375L15.2289 11.9784C15.4396 12.2383 15.4106 12.6209 15.1488 12.8452L13.8474 11.3266ZM15.7826 11.5038C15.3039 10.9129 14.4316 10.8259 13.8474 11.3266L15.1488 12.8452C14.8704 13.0838 14.4527 13.0393 14.2288 12.7629L15.7826 11.5038ZM15.7826 17.6852L17.7769 15.2241L16.2231 13.9649L14.2288 16.426L15.7826 17.6852ZM17.7769 13.9649L15.7826 11.5038L14.2288 12.7629L16.2231 15.2241L17.7769 13.9649Z"
fill="currentColor" mask="url(#path-6-inside-2)"></path>
</svg>
Code
</button>
</li>
</ul>
</div>
<div class="block" data-tab-content="true" id="validationsection">
<div class="flex flex-wrap">
<div class="mb-3 w-full md:w-1/3">
<label class="inline-block mb-2 text-slate-400">First Name</label>
<input type="text" id="uifirstname" value="Mark"
class="text-secondary-500 is-valid w-full px-4 py-2 placeholder-slate-400 border border-success-400 focus:shadow rounded outline-none">
<span id="uifnamelooksgood" class="text-success-500 mt-1 text-sm">Looks good!</span>
</div>
<div class="mb-3 md:ml-4 md:w-1/3 w-full">
<label class="inline-block mb-2 text-slate-400">Last Name</label>
<input type="text" id="uilastname" value="Otto"
class="text-secondary-500 is-valid w-full px-4 py-2 placeholder-slate-400 border border-success-400 focus:shadow rounded outline-none">
<span id="uilnamelooksgood" class="text-success-500 mt-1 text-sm">Looks good!</span>
</div>
<div class="mb-3 md:ml-4 md:w-1/4 w-full">
<label class="inline-block mb-2 text-slate-400">Username</label>
<div class="relative flex items-stretch mb-3 ">
<span
class="flex items-center px-4 py-2 border-t border-b border-l rounded whitespace-nowrap text-secondary-500"
id="basic-addon1">@</span>
<input type="email" id="uiusername"
class="text-secondary-500 is-invalid block w-full px-4 py-2 border border-danger-500 outline-none rounded-r focus:shadow">
</div>
<span id="uiusererror" class="text-danger-400 mt-1 whitespace-nowrap text-sm">Please choose a
username.</span>
</div>
</div>
<div class="flex flex-wrap">
<div class="mb-3 md:w-2/4 w-full">
<label class="inline-block mb-2 text-slate-400">City</label>
<input type="text" id="uicityname"
class="text-secondary-500 is-invalid w-full block px-4 py-2 placeholder-slate-400 border border-danger-500 focus:shadow rounded outline-none">
<span id="uicityerror" class="text-danger-400 mt-1 text-sm">Please provide a valid city.</span>
</div>
<div class="mb-3 md:ml-4 md:w-1/5 w-full">
<label class="inline-block mb-2 text-slate-400">State</label>
<select id="uistatename"
class="is-invalid1 block w-full py-2 px-4 text-slate-400 border border-danger-500 rounded-lg outline-none"
placeholder="choose">
<option value="noselect" selected="">Choose</option>
<option value="1">...</option>
</select>
<span id="uistateerror" class="text-danger-400 mt-1 text-sm">Please select a valid state.</span>
</div>
<div class="mb-3 md:ml-4 md:w-1/5 w-full">
<label class="inline-block mb-2 text-slate-400">Zip</label>
<input type="number" id="uizip"
class="text-secondary-500 is-invalid w-full block px-4 py-2 placeholder-slate-400 border border-danger-500 focus:shadow rounded outline-none">
<span id="uiziperror" class="text-danger-400 mt-1 text-sm">Please provide a valid zip.</span>
</div>
</div>
<div class="mb-3 flex">
<input class="float-left w-4 h-4 mr-2 mt-1 bg-center bg-no-repeat border border-primary-500 rounded"
type="checkbox" id="uivalidationcheckbox">
<label id="uilabel" class="text-danger-400 font-medium form-check-label"
for="uivalidationcheckbox">Agree to terms and conditions <br>
<span id="uitandc" class="text-sm">You must agree before submitting.</span>
</label>
</div>
<button onclick="uivalidation()"
class="inline-block px-6 py-2 mb-4 mr-4 text-center text-white bg-primary-500 border border-primary-300 rounded shadow-md ">Submit
Form</button>
</div>
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is a lead paragraph. It stands out from regular paragraphs.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
A well-known quote, contained in a blockquote element.
<div class="block" data-tab-content="true" id="typographysection">
<div>
<p class="mb-4 font-light text-slate-400 md:text-8xl text-7xl">Display 1</p>
<p class="mb-4 text-6xl font-light text-slate-400 md:text-7xl">Display 2</p>
<p class="mb-4 text-5xl font-light text-slate-400 md:text-6xl">Display 3</p>
<p class="mb-4 text-4xl font-light text-slate-400 md:text-5xl">Display 4</p>
<p class="mb-4 text-3xl font-light text-slate-400 md:text-4xl">Display 5</p>
<p class="mb-4 text-2xl font-light text-slate-400 md:text-3xl">Display 6</p>
</div>
<div class="mt-4">
<p class="text-4xl font-medium">Heading 1</p>
<p class="text-3xl font-medium">Heading 2</p>
<p class="text-2xl font-medium">Heading 3</p>
<p class="text-xl font-medium">Heading 4</p>
<p class="text-lg font-medium">Heading 5</p>
<p class=" font-medium">Heading 6</p>
</div>
<p class="mt-4 text-xl font-light text-slate-400">This is a lead paragraph. It stands out from regular
paragraphs.</p>
<div class="mt-4 text-slate-400">
<p class="mb-4">You can use the mark tag to <mark class="bg-danger-50">highlight</mark> text.</p>
<p class="mb-4"><del>This line of text is meant to be treated as deleted text.</del></p>
<p class="mb-4"><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p class="mb-4"><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p class="mb-4"><u>This line of text will render as underlined.</u></p>
<p class="mb-4"><small>This line of text is meant to be treated as fine print.</small></p>
<p class="mb-4"><strong>This line rendered as bold text.</strong></p>
<p class="mb-4"><em>This line rendered as italicized text.</em></p>
</div>
<div class="mt-4 text-slate-400">
<blockquote class="mb-4 text-xl">
<p class="mb-4">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite data-tp-title"Source Title">Source Title</cite>
</footer>
</blockquote>
</div>
<div class="mt-4 text-slate-400">
<ul class="mb-4">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul class="pl-8 list-disc">
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
</div>
<div class="mt-4 text-slate-400">
<ul class="list-inline">
<li class="inline-block mr-2">This is a list item.</li>
<li class="inline-block mr-2">And another one.</li>
<li class="inline-block">But they're displayed inline.</li>
</ul>
</div>
</div>
<div class="block" data-tab-content="true" id="imagessection">
<div class="bg-white">
<svg class="w-full " width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img"
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">Responsive image</text>
</svg>
</div>
<div class="mt-4">
<svg class="p-1 border border-secondary-300 rounded" width="200" height="200"
xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>A generic square placeholder image with a white border around it, making it resemble a
photograph taken with an old instant camera</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="33%" y="50%" fill="#dee2e6"
dy=".3em">200x200</text>
</svg>
</div>
</div>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="block overflow-x-auto" data-tab-content="true" id="tablesection">
<div>
<table class="min-w-full divide-y divide-secondary-200">
<thead class="bg-secondary-100">
<tr>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-secondary-600">#</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-secondary-600">First
</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-secondary-600">Last
</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-secondary-600">Handle
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-secondary-200">
<tr>
<th scope="row" class="px-6 text-secondary-600 py-4 text-justify whitespace-nowrap">1</th>
<td class="px-6 text-secondary-600 py-4 whitespace-nowrap">Mark</td>
<td class="px-6 text-secondary-600 py-4 whitespace-nowrap">Otto</td>
<td class="px-6 text-secondary-600 py-4 whitespace-nowrap">@mdo</td>
</tr>
<tr>
<th scope="row"
class="px-6 text-secondary-600 py-4 text-justify whitespace-nowrap bg-secondary-100">2</th>
<td class="px-6 text-secondary-600 py-4 whitespace-nowrap bg-secondary-100">Jacob</td>
<td class="px-6 text-secondary-600 py-4 whitespace-nowrap bg-secondary-100">Thornton</td>
<td class="px-6 text-secondary-600 py-4 whitespace-nowrap bg-secondary-100">@fat</td>
</tr>
<tr>
<th scope="row" class="px-6 text-secondary-600 py-4 text-justify whitespace-nowrap">3</th>
<td colspan="2" class="px-6 text-secondary-600 py-4 whitespace-nowrap">Larry the Bird</td>
<td class="px-6 text-secondary-600 py-4 whitespace-nowrap">@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4">
<table class="min-w-full bg-secondary-900 divide-y divide-stone-800">
<thead class="bg-secondary-900">
<tr>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-white">#</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-white">First
</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-white">Last</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-white">Handle
</th>
</tr>
</thead>
<tbody class="bg-syone-800 divide-y divide-stone-800">
<tr>
<th scope="row" class="px-6 py-4 text-justify text-white whitespace-nowrap">1</th>
<td class="px-6 py-4 text-white whitespace-nowrap">Mark</td>
<td class="px-6 py-4 text-white whitespace-nowrap">Otto</td>
<td class="px-6 py-4 text-white whitespace-nowrap">@mdo</td>
</tr>
<tr>
<th scope="row" class="px-6 py-4 text-justify text-white whitespace-nowrap">2</th>
<td class="px-6 py-4 text-white whitespace-nowrap">Jacob</td>
<td class="px-6 py-4 text-white whitespace-nowrap">Thornton</td>
<td class="px-6 py-4 text-white whitespace-nowrap">@fat</td>
</tr>
<tr>
<th scope="row" class="px-6 py-4 text-justify text-white whitespace-nowrap">3</th>
<td colspan="2" class="px-6 py-4 text-white whitespace-nowrap">Larry the Bird</td>
<td class="px-6 py-4 text-white whitespace-nowrap">@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4">
<table class="min-w-full divide-y divide-secondary-200">
<thead class="bg-secondary-100">
<tr>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-secondary-500">Class
</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-secondary-500">Heading
</th>
<th scope="col" class="px-6 py-3 font-medium tracking-wider text-left text-secondary-500">Heading
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-secondary-200">
<tr class="text-secondary-500 hover:bg-secondary-100">
<td scope="row" class="px-6 py-4 font-semibold text-justify whitespace-nowrap">Default</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap ">Cell</td>
</tr>
<tr class="text-secondary-700 bg-primary-100 hover:bg-primary-200">
<td scope="row" class="font-semibold px-6 py-4 text-justify whitespace-nowrap">Primary</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="text-secondary-700 bg-secondary-300 hover:bg-secondary-400">
<td scope="row" class="font-semibold px-6 py-4 text-justify whitespace-nowrap">Secondary</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="text-secondary-700 bg-success-100 hover:bg-success-200">
<td scope="row" class="font-semibold px-6 py-4 text-justify whitespace-nowrap">Success</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="text-secondary-700 bg-danger-100 hover:bg-danger-200">
<td scope="row" class="font-semibold px-6 py-4 text-justify whitespace-nowrap">Danger</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="text-secondary-700 bg-warning-100 hover:bg-warning-200">
<td scope="row" class="font-semibold px-6 py-4 text-justify whitespace-nowrap">Warning</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="text-secondary-700 bg-info-100 hover:bg-info-200">
<td scope="row" class="font-semibold px-6 py-4 text-justify whitespace-nowrap">Info</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="text-secondary-500 bg-secondary-200 hover:bg-secondary-300">
<td scope="row" class="font-semibold px-6 py-4 text-justify whitespace-nowrap">Light</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
<tr class="text-white bg-secondary-900 hover:bg-secondary-800">
<td scope="row" class="font-semibold px-6 py-4 text-justify whitespace-nowrap">Dark</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
<td class="px-6 py-4 whitespace-nowrap">Cell</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4">
<table class="min-w-full border border-collapse">
<thead class="bg-secondary-100 ">
<tr>
<th scope="col" class="px-6 py-3 tracking-wider text-left text-secondary-500 font-medium border">#
</th>
<th scope="col" class="px-6 py-3 tracking-wider text-left text-secondary-500 font-medium border">
First</th>
<th scope="col" class="px-6 py-3 tracking-wider text-left text-secondary-500 font-medium border">
Last</th>
<th scope="col" class="px-6 py-3 tracking-wider text-left text-secondary-500 font-medium border">
Handle</th>
</tr>
</thead>
<tbody class="bg-white">
<tr>
<th scope="row" class="p-1 px-6 text-justify border text-secondary-500 whitespace-nowrap">1</th>
<td class="p-1 px-6 border text-secondary-500 whitespace-nowrap">Mark</td>
<td class="p-1 px-6 border text-secondary-500 whitespace-nowrap">Otto</td>
<td class="p-1 px-6 border text-secondary-500 whitespace-nowrap">@mdo</td>
</tr>
<tr>
<th scope="row" class="p-1 px-6 text-secondary-500 text-justify border whitespace-nowrap">2</th>
<td class="p-1 px-6 border text-secondary-500 whitespace-nowrap">Jacob</td>
<td class="p-1 px-6 border text-secondary-500 whitespace-nowrap">Thornton</td>
<td class="p-1 px-6 border text-secondary-500 whitespace-nowrap">@fat</td>
</tr>
<tr>
<th scope="row" class="p-1 px-6 text-justify border text-secondary-500 whitespace-nowrap">3</th>
<td colspan="2" class="p-1 px-6 border text-secondary-500 whitespace-nowrap">Larry the Bird</td>
<td class="p-1 px-6 border text-secondary-500 whitespace-nowrap">@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="block" data-tab-content="true" id="figuresection">
<figure class="inline-block mb-4 text-2xl">
<svg class="mb-2 rounded-lg" width="58%" height="300" xmlns="http://www.w3.org/2000/svg" role="img"
preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="400" height="100%" fill="#868e96"></rect><text x="42%" y="50%" fill="#dee2e6"
dy=".3em">400x300</text>
</svg>
<figcaption class="text-sm text-secondary-600">A caption for the above image.</figcaption>
</figure>
</div>
