Button

<!--The style and script tags at the top are for offline mode users-->
<style>
/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,
::after,
::before{
box-sizing:border-box;
border-width:0;
border-style:solid;
border-color:#e5e7eb
}
::after,
::before{
--tw-content:''
}
:host,
html{
line-height:1.5;
-webkit-text-size-adjust:100%;
-moz-tab-size:4;
tab-size:4;
font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-feature-settings:normal;
font-variation-settings:normal;
-webkit-tap-highlight-color:transparent
}
body{
margin:0;
line-height:inherit
}
hr{
height:0;
color:inherit;
border-top-width:1px
}
abbr:where([title]){
-webkit-text-decoration:underlinedotted;
text-decoration:underlinedotted
}
h1,
h2,
h3,
h4,
h5,
h6{
font-size:inherit;
font-weight:inherit
}
a{
color:inherit;
text-decoration:inherit
}
b,
strong{
font-weight:bolder
}
code,
kbd,
pre,
samp{
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-feature-settings:normal;
font-variation-settings:normal;
font-size:1em
}
small{
font-size:80%
}
sub,
sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sub{
bottom:-.25em
}
sup{
top:-.5em
}
table{
text-indent:0;
border-color:inherit;
border-collapse:collapse
}
button,
input,
optgroup,
select,
textarea{
font-family:inherit;
font-feature-settings:inherit;
font-variation-settings:inherit;
font-size:100%;
font-weight:inherit;
line-height:inherit;
color:inherit;
margin:0;
padding:0
}
button,
select{
text-transform:none
}
[type=button],
[type=reset],
[type=submit],
button{
-webkit-appearance:button;
background-color:transparent;
background-image:none
}
:-moz-focusring{
outline:auto
}
:-moz-ui-invalid{
box-shadow:none
}
progress{
vertical-align:baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button{
height:auto
}
[type=search]{
-webkit-appearance:textfield;
outline-offset:-2px
}
::-webkit-search-decoration{
-webkit-appearance:none
}
::-webkit-file-upload-button{
-webkit-appearance:button;
font:inherit
}
summary{
display:list-item
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre{
margin:0
}
fieldset{
margin:0;
padding:0
}
legend{
padding:0
}
menu,
ol,
ul{
list-style:none;
margin:0;
padding:0
}
dialog{
padding:0
}
textarea{
resize:vertical
}
input::placeholder,
textarea::placeholder{
opacity:1;
color:#9ca3af
}
[role=button],
button{
cursor:pointer
}
:disabled{
cursor:default
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video{
display:block;
vertical-align:middle
}
img,
video{
max-width:100%;
height:auto
}
[hidden]{
display:none
}
*,
::before,
::after{
--tw-border-spacing-x:0;
--tw-border-spacing-y:0;
--tw-translate-x:0;
--tw-translate-y:0;
--tw-rotate:0;
--tw-skew-x:0;
--tw-skew-y:0;
--tw-scale-x:1;
--tw-scale-y:1;
--tw-pan-x:;
--tw-pan-y:;
--tw-pinch-zoom:;
--tw-scroll-snap-strictness:proximity;
--tw-gradient-from-position:;
--tw-gradient-via-position:;
--tw-gradient-to-position:;
--tw-ordinal:;
--tw-slashed-zero:;
--tw-numeric-figure:;
--tw-numeric-spacing:;
--tw-numeric-fraction:;
--tw-ring-inset:;
--tw-ring-offset-width:0px;
--tw-ring-offset-color:#fff;
--tw-ring-color:rgb(59130246/0.5);
--tw-ring-offset-shadow:00#0000;
--tw-ring-shadow:00#0000;
--tw-shadow:00#0000;
--tw-shadow-colored:00#0000;
--tw-blur:;
--tw-brightness:;
--tw-contrast:;
--tw-grayscale:;
--tw-hue-rotate:;
--tw-invert:;
--tw-saturate:;
--tw-sepia:;
--tw-drop-shadow:;
--tw-backdrop-blur:;
--tw-backdrop-brightness:;
--tw-backdrop-contrast:;
--tw-backdrop-grayscale:;
--tw-backdrop-hue-rotate:;
--tw-backdrop-invert:;
--tw-backdrop-opacity:;
--tw-backdrop-saturate:;
--tw-backdrop-sepia:
}
::backdrop{
--tw-border-spacing-x:0;
--tw-border-spacing-y:0;
--tw-translate-x:0;
--tw-translate-y:0;
--tw-rotate:0;
--tw-skew-x:0;
--tw-skew-y:0;
--tw-scale-x:1;
--tw-scale-y:1;
--tw-pan-x:;
--tw-pan-y:;
--tw-pinch-zoom:;
--tw-scroll-snap-strictness:proximity;
--tw-gradient-from-position:;
--tw-gradient-via-position:;
--tw-gradient-to-position:;
--tw-ordinal:;
--tw-slashed-zero:;
--tw-numeric-figure:;
--tw-numeric-spacing:;
--tw-numeric-fraction:;
--tw-ring-inset:;
--tw-ring-offset-width:0px;
--tw-ring-offset-color:#fff;
--tw-ring-color:rgb(59130246/0.5);
--tw-ring-offset-shadow:00#0000;
--tw-ring-shadow:00#0000;
--tw-shadow:00#0000;
--tw-shadow-colored:00#0000;
--tw-blur:;
--tw-brightness:;
--tw-contrast:;
--tw-grayscale:;
--tw-hue-rotate:;
--tw-invert:;
--tw-saturate:;
--tw-sepia:;
--tw-drop-shadow:;
--tw-backdrop-blur:;
--tw-backdrop-brightness:;
--tw-backdrop-contrast:;
--tw-backdrop-grayscale:;
--tw-backdrop-hue-rotate:;
--tw-backdrop-invert:;
--tw-backdrop-opacity:;
--tw-backdrop-saturate:;
--tw-backdrop-sepia:
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border-width:0
}
.mx-auto{
margin-left:auto;
margin-right:auto
}
.mt-4{
margin-top:1rem
}
.block{
display:block
}
.flex{
display:flex
}
.inline-flex{
display:inline-flex
}
.hidden{
display:none
}
.h-10{
height:2.5rem
}
.h-5{
height:1.25rem
}
.h-8{
height:2rem
}
.w-10{
width:2.5rem
}
.w-5{
width:1.25rem
}
.w-full{
width:100%
}
.max-w-screen-xl{
max-width:1280px
}
.flex-col{
flex-direction:column
}
.flex-wrap{
flex-wrap:wrap
}
.items-center{
align-items:center
}
.justify-center{
justify-content:center
}
.justify-between{
justify-content:space-between
}
.space-x-3>:not([hidden])~:not([hidden]){
--tw-space-x-reverse:0;
margin-right:calc(0.75rem*var(--tw-space-x-reverse));
margin-left:calc(0.75rem*calc(1-var(--tw-space-x-reverse)))
}
.rounded{
border-radius:0.25rem
}
.rounded-lg{
border-radius:0.5rem
}
.border{
border-width:1px
}
.border-gray-100{
--tw-border-opacity:1;
border-color:rgb(243244246/var(--tw-border-opacity))
}
.border-gray-200{
--tw-border-opacity:1;
border-color:rgb(229231235/var(--tw-border-opacity))
}
.bg-blue-700{
--tw-bg-opacity:1;
background-color:rgb(2978216/var(--tw-bg-opacity))
}
.bg-gray-50{
--tw-bg-opacity:1;
background-color:rgb(249250251/var(--tw-bg-opacity))
}
.bg-white{
--tw-bg-opacity:1;
background-color:rgb(255255255/var(--tw-bg-opacity))
}
.p-2{
padding:0.5rem
}
.p-4{
padding:1rem
}
.px-3{
padding-left:0.75rem;
padding-right:0.75rem
}
.py-2{
padding-top:0.5rem;
padding-bottom:0.5rem
}
.text-sm{
font-size:0.875rem;
line-height:1.25rem
}
.font-medium{
font-weight:500
}
.text-gray-500{
--tw-text-opacity:1;
color:rgb(107114128/var(--tw-text-opacity))
}
.text-gray-900{
--tw-text-opacity:1;
color:rgb(172439/var(--tw-text-opacity))
}
.text-white{
--tw-text-opacity:1;
color:rgb(255255255/var(--tw-text-opacity))
}
.hover\:bg-gray-100:hover{
--tw-bg-opacity:1;
background-color:rgb(243244246/var(--tw-bg-opacity))
}
.focus\:outline-none:focus{
outline:2pxsolidtransparent;
outline-offset:2px
}
.focus\:ring-2:focus{
--tw-ring-offset-shadow:var(--tw-ring-inset)000var(--tw-ring-offset-width)var(--tw-ring-offset-color);
--tw-ring-shadow:var(--tw-ring-inset)000calc(2px+var(--tw-ring-offset-width))var(--tw-ring-color);
box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,00#0000)
}
.focus\:ring-gray-200:focus{
--tw-ring-opacity:1;
--tw-ring-color:rgb(229231235/var(--tw-ring-opacity))
}
@media(min-width:768px){
.md\:mt-0{
margin-top:0px
}
.md\:block{
display:block
}
.md\:hidden{
display:none
}
.md\:w-auto{
width:auto
}
.md\:flex-row{
flex-direction:row
}
.md\:space-x-8>:not([hidden])~:not([hidden]){
--tw-space-x-reverse:0;
margin-right:calc(2rem*var(--tw-space-x-reverse));
margin-left:calc(2rem*calc(1-var(--tw-space-x-reverse)))
}
.md\:border-0{
border-width:0px
}
.md\:bg-transparent{
background-color:transparent
}
.md\:bg-white{
--tw-bg-opacity:1;
background-color:rgb(255255255/var(--tw-bg-opacity))
}
.md\:p-0{
padding:0px
}
.md\:text-blue-700{
--tw-text-opacity:1;
color:rgb(2978216/var(--tw-text-opacity))
}
.md\:hover\:bg-transparent:hover{
background-color:transparent
}
.md\:hover\:text-blue-700:hover{
--tw-text-opacity:1;
color:rgb(2978216/var(--tw-text-opacity))
}
}
.rtl\:space-x-reverse:where([dir="rtl"],
[dir="rtl"]*)>:not([hidden])~:not([hidden]){
--tw-space-x-reverse:1
}
@media(prefers-color-scheme:dark){
.dark\:border-gray-700{
--tw-border-opacity:1;
border-color:rgb(556581/var(--tw-border-opacity))
}
.dark\:bg-gray-800{
--tw-bg-opacity:1;
background-color:rgb(314155/var(--tw-bg-opacity))
}
.dark\:bg-gray-900{
--tw-bg-opacity:1;
background-color:rgb(172439/var(--tw-bg-opacity))
}
.dark\:text-gray-400{
--tw-text-opacity:1;
color:rgb(156163175/var(--tw-text-opacity))
}
.dark\:text-white{
--tw-text-opacity:1;
color:rgb(255255255/var(--tw-text-opacity))
}
.dark\:hover\:bg-gray-700:hover{
--tw-bg-opacity:1;
background-color:rgb(556581/var(--tw-bg-opacity))
}
.dark\:hover\:text-white:hover{
--tw-text-opacity:1;
color:rgb(255255255/var(--tw-text-opacity))
}
.dark\:focus\:ring-gray-600:focus{
--tw-ring-opacity:1;
--tw-ring-color:rgb(758599/var(--tw-ring-opacity))
}
}
@media(min-width:768px){
@media(prefers-color-scheme:dark){
.md\:dark\:bg-gray-900{
--tw-bg-opacity:1;
background-color:rgb(172439/var(--tw-bg-opacity))
}
.md\:dark\:text-blue-500{
--tw-text-opacity:1;
color:rgb(59130246/var(--tw-text-opacity))
}
.md\:dark\:hover\:bg-transparent:hover{
background-color:transparent
}
.md\:dark\:hover\:text-blue-500:hover{
--tw-text-opacity:1;
color:rgb(59130246/var(--tw-text-opacity))
}
}
}

</style>
<script src="https://cdn.tailwindcss.com"></script>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
 Button
</button>

Navbar

<!--The style and script tags at the top are for offline mode users-->
<style>
/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,
::after,
::before{
box-sizing:border-box;
border-width:0;
border-style:solid;
border-color:#e5e7eb
}
::after,
::before{
--tw-content:''
}
:host,
html{
line-height:1.5;
-webkit-text-size-adjust:100%;
-moz-tab-size:4;
tab-size:4;
font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-feature-settings:normal;
font-variation-settings:normal;
-webkit-tap-highlight-color:transparent
}
body{
margin:0;
line-height:inherit
}
hr{
height:0;
color:inherit;
border-top-width:1px
}
abbr:where([title]){
-webkit-text-decoration:underlinedotted;
text-decoration:underlinedotted
}
h1,
h2,
h3,
h4,
h5,
h6{
font-size:inherit;
font-weight:inherit
}
a{
color:inherit;
text-decoration:inherit
}
b,
strong{
font-weight:bolder
}
code,
kbd,
pre,
samp{
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-feature-settings:normal;
font-variation-settings:normal;
font-size:1em
}
small{
font-size:80%
}
sub,
sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sub{
bottom:-.25em
}
sup{
top:-.5em
}
table{
text-indent:0;
border-color:inherit;
border-collapse:collapse
}
button,
input,
optgroup,
select,
textarea{
font-family:inherit;
font-feature-settings:inherit;
font-variation-settings:inherit;
font-size:100%;
font-weight:inherit;
line-height:inherit;
color:inherit;
margin:0;
padding:0
}
button,
select{
text-transform:none
}
[type=button],
[type=reset],
[type=submit],
button{
-webkit-appearance:button;
background-color:transparent;
background-image:none
}
:-moz-focusring{
outline:auto
}
:-moz-ui-invalid{
box-shadow:none
}
progress{
vertical-align:baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button{
height:auto
}
[type=search]{
-webkit-appearance:textfield;
outline-offset:-2px
}
::-webkit-search-decoration{
-webkit-appearance:none
}
::-webkit-file-upload-button{
-webkit-appearance:button;
font:inherit
}
summary{
display:list-item
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre{
margin:0
}
fieldset{
margin:0;
padding:0
}
legend{
padding:0
}
menu,
ol,
ul{
list-style:none;
margin:0;
padding:0
}
dialog{
padding:0
}
textarea{
resize:vertical
}
input::placeholder,
textarea::placeholder{
opacity:1;
color:#9ca3af
}
[role=button],
button{
cursor:pointer
}
:disabled{
cursor:default
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video{
display:block;
vertical-align:middle
}
img,
video{
max-width:100%;
height:auto
}
[hidden]{
display:none
}
*,
::before,
::after{
--tw-border-spacing-x:0;
--tw-border-spacing-y:0;
--tw-translate-x:0;
--tw-translate-y:0;
--tw-rotate:0;
--tw-skew-x:0;
--tw-skew-y:0;
--tw-scale-x:1;
--tw-scale-y:1;
--tw-pan-x:;
--tw-pan-y:;
--tw-pinch-zoom:;
--tw-scroll-snap-strictness:proximity;
--tw-gradient-from-position:;
--tw-gradient-via-position:;
--tw-gradient-to-position:;
--tw-ordinal:;
--tw-slashed-zero:;
--tw-numeric-figure:;
--tw-numeric-spacing:;
--tw-numeric-fraction:;
--tw-ring-inset:;
--tw-ring-offset-width:0px;
--tw-ring-offset-color:#fff;
--tw-ring-color:rgb(59130246/0.5);
--tw-ring-offset-shadow:00#0000;
--tw-ring-shadow:00#0000;
--tw-shadow:00#0000;
--tw-shadow-colored:00#0000;
--tw-blur:;
--tw-brightness:;
--tw-contrast:;
--tw-grayscale:;
--tw-hue-rotate:;
--tw-invert:;
--tw-saturate:;
--tw-sepia:;
--tw-drop-shadow:;
--tw-backdrop-blur:;
--tw-backdrop-brightness:;
--tw-backdrop-contrast:;
--tw-backdrop-grayscale:;
--tw-backdrop-hue-rotate:;
--tw-backdrop-invert:;
--tw-backdrop-opacity:;
--tw-backdrop-saturate:;
--tw-backdrop-sepia:
}
::backdrop{
--tw-border-spacing-x:0;
--tw-border-spacing-y:0;
--tw-translate-x:0;
--tw-translate-y:0;
--tw-rotate:0;
--tw-skew-x:0;
--tw-skew-y:0;
--tw-scale-x:1;
--tw-scale-y:1;
--tw-pan-x:;
--tw-pan-y:;
--tw-pinch-zoom:;
--tw-scroll-snap-strictness:proximity;
--tw-gradient-from-position:;
--tw-gradient-via-position:;
--tw-gradient-to-position:;
--tw-ordinal:;
--tw-slashed-zero:;
--tw-numeric-figure:;
--tw-numeric-spacing:;
--tw-numeric-fraction:;
--tw-ring-inset:;
--tw-ring-offset-width:0px;
--tw-ring-offset-color:#fff;
--tw-ring-color:rgb(59130246/0.5);
--tw-ring-offset-shadow:00#0000;
--tw-ring-shadow:00#0000;
--tw-shadow:00#0000;
--tw-shadow-colored:00#0000;
--tw-blur:;
--tw-brightness:;
--tw-contrast:;
--tw-grayscale:;
--tw-hue-rotate:;
--tw-invert:;
--tw-saturate:;
--tw-sepia:;
--tw-drop-shadow:;
--tw-backdrop-blur:;
--tw-backdrop-brightness:;
--tw-backdrop-contrast:;
--tw-backdrop-grayscale:;
--tw-backdrop-hue-rotate:;
--tw-backdrop-invert:;
--tw-backdrop-opacity:;
--tw-backdrop-saturate:;
--tw-backdrop-sepia:
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border-width:0
}
.mx-auto{
margin-left:auto;
margin-right:auto
}
.mt-4{
margin-top:1rem
}
.block{
display:block
}
.flex{
display:flex
}
.inline-flex{
display:inline-flex
}
.hidden{
display:none
}
.h-10{
height:2.5rem
}
.h-5{
height:1.25rem
}
.h-8{
height:2rem
}
.w-10{
width:2.5rem
}
.w-5{
width:1.25rem
}
.w-full{
width:100%
}
.max-w-screen-xl{
max-width:1280px
}
.flex-col{
flex-direction:column
}
.flex-wrap{
flex-wrap:wrap
}
.items-center{
align-items:center
}
.justify-center{
justify-content:center
}
.justify-between{
justify-content:space-between
}
.space-x-3>:not([hidden])~:not([hidden]){
--tw-space-x-reverse:0;
margin-right:calc(0.75rem*var(--tw-space-x-reverse));
margin-left:calc(0.75rem*calc(1-var(--tw-space-x-reverse)))
}
.rounded{
border-radius:0.25rem
}
.rounded-lg{
border-radius:0.5rem
}
.border{
border-width:1px
}
.border-gray-100{
--tw-border-opacity:1;
border-color:rgb(243244246/var(--tw-border-opacity))
}
.border-gray-200{
--tw-border-opacity:1;
border-color:rgb(229231235/var(--tw-border-opacity))
}
.bg-blue-700{
--tw-bg-opacity:1;
background-color:rgb(2978216/var(--tw-bg-opacity))
}
.bg-gray-50{
--tw-bg-opacity:1;
background-color:rgb(249250251/var(--tw-bg-opacity))
}
.bg-white{
--tw-bg-opacity:1;
background-color:rgb(255255255/var(--tw-bg-opacity))
}
.p-2{
padding:0.5rem
}
.p-4{
padding:1rem
}
.px-3{
padding-left:0.75rem;
padding-right:0.75rem
}
.py-2{
padding-top:0.5rem;
padding-bottom:0.5rem
}
.text-sm{
font-size:0.875rem;
line-height:1.25rem
}
.font-medium{
font-weight:500
}
.text-gray-500{
--tw-text-opacity:1;
color:rgb(107114128/var(--tw-text-opacity))
}
.text-gray-900{
--tw-text-opacity:1;
color:rgb(172439/var(--tw-text-opacity))
}
.text-white{
--tw-text-opacity:1;
color:rgb(255255255/var(--tw-text-opacity))
}
.hover\:bg-gray-100:hover{
--tw-bg-opacity:1;
background-color:rgb(243244246/var(--tw-bg-opacity))
}
.focus\:outline-none:focus{
outline:2pxsolidtransparent;
outline-offset:2px
}
.focus\:ring-2:focus{
--tw-ring-offset-shadow:var(--tw-ring-inset)000var(--tw-ring-offset-width)var(--tw-ring-offset-color);
--tw-ring-shadow:var(--tw-ring-inset)000calc(2px+var(--tw-ring-offset-width))var(--tw-ring-color);
box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,00#0000)
}
.focus\:ring-gray-200:focus{
--tw-ring-opacity:1;
--tw-ring-color:rgb(229231235/var(--tw-ring-opacity))
}
@media(min-width:768px){
.md\:mt-0{
margin-top:0px
}
.md\:block{
display:block
}
.md\:hidden{
display:none
}
.md\:w-auto{
width:auto
}
.md\:flex-row{
flex-direction:row
}
.md\:space-x-8>:not([hidden])~:not([hidden]){
--tw-space-x-reverse:0;
margin-right:calc(2rem*var(--tw-space-x-reverse));
margin-left:calc(2rem*calc(1-var(--tw-space-x-reverse)))
}
.md\:border-0{
border-width:0px
}
.md\:bg-transparent{
background-color:transparent
}
.md\:bg-white{
--tw-bg-opacity:1;
background-color:rgb(255255255/var(--tw-bg-opacity))
}
.md\:p-0{
padding:0px
}
.md\:text-blue-700{
--tw-text-opacity:1;
color:rgb(2978216/var(--tw-text-opacity))
}
.md\:hover\:bg-transparent:hover{
background-color:transparent
}
.md\:hover\:text-blue-700:hover{
--tw-text-opacity:1;
color:rgb(2978216/var(--tw-text-opacity))
}
}
.rtl\:space-x-reverse:where([dir="rtl"],
[dir="rtl"]*)>:not([hidden])~:not([hidden]){
--tw-space-x-reverse:1
}
@media(prefers-color-scheme:dark){
.dark\:border-gray-700{
--tw-border-opacity:1;
border-color:rgb(556581/var(--tw-border-opacity))
}
.dark\:bg-gray-800{
--tw-bg-opacity:1;
background-color:rgb(314155/var(--tw-bg-opacity))
}
.dark\:bg-gray-900{
--tw-bg-opacity:1;
background-color:rgb(172439/var(--tw-bg-opacity))
}
.dark\:text-gray-400{
--tw-text-opacity:1;
color:rgb(156163175/var(--tw-text-opacity))
}
.dark\:text-white{
--tw-text-opacity:1;
color:rgb(255255255/var(--tw-text-opacity))
}
.dark\:hover\:bg-gray-700:hover{
--tw-bg-opacity:1;
background-color:rgb(556581/var(--tw-bg-opacity))
}
.dark\:hover\:text-white:hover{
--tw-text-opacity:1;
color:rgb(255255255/var(--tw-text-opacity))
}
.dark\:focus\:ring-gray-600:focus{
--tw-ring-opacity:1;
--tw-ring-color:rgb(758599/var(--tw-ring-opacity))
}
}
@media(min-width:768px){
@media(prefers-color-scheme:dark){
.md\:dark\:bg-gray-900{
--tw-bg-opacity:1;
background-color:rgb(172439/var(--tw-bg-opacity))
}
.md\:dark\:text-blue-500{
--tw-text-opacity:1;
color:rgb(59130246/var(--tw-text-opacity))
}
.md\:dark\:hover\:bg-transparent:hover{
background-color:transparent
}
.md\:dark\:hover\:text-blue-500:hover{
--tw-text-opacity:1;
color:rgb(59130246/var(--tw-text-opacity))
}
}
}

</style>
<script src="https://cdn.tailwindcss.com"></script>
<nav class="bg-white border-gray-200 dark:bg-gray-900">
 <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
 <a href="https://v1.tailwindcss.com" class="flex items-center space-x-3 rtl:space-x-reverse">
 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNjIgMzMiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjcgMEMxOS44IDAgMTUuMyAzLjYgMTMuNSAxMC44QzE2LjIgNy4yIDE5LjM1IDUuODUgMjIuOTUgNi43NUMyNS4wMDQgNy4yNjMgMjYuNDcyIDguNzU0IDI4LjA5NyAxMC40MDNDMzAuNzQ0IDEzLjA5IDMzLjgwOCAxNi4yIDQwLjUgMTYuMkM0Ny43IDE2LjIgNTIuMiAxMi42IDU0IDUuNEM1MS4zIDkgNDguMTUgMTAuMzUgNDQuNTUgOS40NUM0Mi40OTYgOC45MzcgNDEuMDI4IDcuNDQ2IDM5LjQwMyA1Ljc5N0MzNi43NTYgMy4xMSAzMy42OTIgMCAyNyAwWk0xMy41IDE2LjJDNi4zIDE2LjIgMS44IDE5LjggMCAyN0MyLjcgMjMuNCA1Ljg1IDIyLjA1IDkuNDUgMjIuOTVDMTEuNTA0IDIzLjQ2NCAxMi45NzIgMjQuOTU0IDE0LjU5NyAyNi42MDNDMTcuMjQ0IDI5LjI5IDIwLjMwOCAzMi40IDI3IDMyLjRDMzQuMiAzMi40IDM4LjcgMjguOCA0MC41IDIxLjZDMzcuOCAyNS4yIDM0LjY1IDI2LjU1IDMxLjA1IDI1LjY1QzI4Ljk5NiAyNS4xMzcgMjcuNTI4IDIzLjY0NiAyNS45MDMgMjEuOTk3QzIzLjI1NiAxOS4zMSAyMC4xOTIgMTYuMiAxMy41IDE2LjJaIiBmaWxsPSIjMzhCREY4Ii8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04MC45OTYgMTMuNjUySDc2LjI4NFYyMi43NzJDNzYuMjg0IDI1LjIwNCA3Ny44OCAyNS4xNjYgODAuOTk2IDI1LjAxNFYyOC43Qzc0LjY4OCAyOS40NiA3Mi4xOCAyNy43MTIgNzIuMTggMjIuNzcyVjEzLjY1Mkg2OC42ODRWOS42OTk5Nkg3Mi4xOFY0LjU5NTk2TDc2LjI4NCAzLjM3OTk2VjkuNjk5OTZIODAuOTk2VjEzLjY1MlpNOTguOTU4IDkuNjk5OTZIMTAzLjA2MlYyOC43SDk4Ljk1OFYyNS45NjRDOTcuNTE0IDI3Ljk3OCA5NS4yNzIgMjkuMTk0IDkyLjMwOCAyOS4xOTRDODcuMTQgMjkuMTk0IDgyLjg0NiAyNC44MjQgODIuODQ2IDE5LjJDODIuODQ2IDEzLjUzOCA4Ny4xNCA5LjIwNTk2IDkyLjMwOCA5LjIwNTk2Qzk1LjI3MiA5LjIwNTk2IDk3LjUxNCAxMC40MjIgOTguOTU4IDEyLjM5OFY5LjY5OTk2Wk05Mi45NTQgMjUuMjhDOTYuMzc0IDI1LjI4IDk4Ljk1OCAyMi43MzQgOTguOTU4IDE5LjJDOTguOTU4IDE1LjY2NiA5Ni4zNzQgMTMuMTIgOTIuOTU0IDEzLjEyQzg5LjUzNCAxMy4xMiA4Ni45NSAxNS42NjYgODYuOTUgMTkuMkM4Ni45NSAyMi43MzQgODkuNTM0IDI1LjI4IDkyLjk1NCAyNS4yOFpNMTA5LjkwMiA2Ljg0OTk2QzEwOC40NTggNi44NDk5NiAxMDcuMjggNS42MzM5NiAxMDcuMjggNC4yMjc5NkMxMDcuMjgxIDMuNTMyOTcgMTA3LjU1OCAyLjg2NjgyIDEwOC4wNDkgMi4zNzUzOUMxMDguNTQxIDEuODgzOTUgMTA5LjIwNyAxLjYwNzI4IDEwOS45MDIgMS42MDU5NkMxMTAuNTk3IDEuNjA3MjggMTExLjI2MyAxLjg4Mzk1IDExMS43NTUgMi4zNzUzOUMxMTIuMjQ2IDIuODY2ODIgMTEyLjUyMyAzLjUzMjk3IDExMi41MjQgNC4yMjc5NkMxMTIuNTI0IDUuNjMzOTYgMTExLjM0NiA2Ljg0OTk2IDEwOS45MDIgNi44NDk5NlpNMTA3Ljg1IDI4LjdWOS42OTk5NkgxMTEuOTU0VjI4LjdIMTA3Ljg1Wk0xMTYuNzA0IDI4LjdWMC45NTk5NjFIMTIwLjgwOFYyOC43SDExNi43MDRaTTE0Ny40NDYgOS42OTk5NkgxNTEuNzc4TDE0NS44MTIgMjguN0gxNDEuNzg0TDEzNy44MzIgMTUuODk0TDEzMy44NDIgMjguN0gxMjkuODE0TDEyMy44NDggOS42OTk5NkgxMjguMThMMTMxLjg2NiAyMi44MUwxMzUuODU2IDkuNjk5OTZIMTM5Ljc3TDE0My43MjIgMjIuODFMMTQ3LjQ0NiA5LjY5OTk2Wk0xNTYuODcgNi44NDk5NkMxNTUuNDI2IDYuODQ5OTYgMTU0LjI0OCA1LjYzMzk2IDE1NC4yNDggNC4yMjc5NkMxNTQuMjQ5IDMuNTMyOTcgMTU0LjUyNiAyLjg2NjgyIDE1NS4wMTcgMi4zNzUzOUMxNTUuNTA5IDEuODgzOTUgMTU2LjE3NSAxLjYwNzI4IDE1Ni44NyAxLjYwNTk2QzE1Ny41NjUgMS42MDcyOCAxNTguMjMxIDEuODgzOTUgMTU4LjcyMyAyLjM3NTM5QzE1OS4yMTQgMi44NjY4MiAxNTkuNDkxIDMuNTMyOTcgMTU5LjQ5MiA0LjIyNzk2QzE1OS40OTIgNS42MzM5NiAxNTguMzE0IDYuODQ5OTYgMTU2Ljg3IDYuODQ5OTZaTTE1NC44MTggMjguN1Y5LjY5OTk2SDE1OC45MjJWMjguN0gxNTQuODE4Wk0xNzMuNjY2IDkuMjA1OTZDMTc3LjkyMiA5LjIwNTk2IDE4MC45NjIgMTIuMDk0IDE4MC45NjIgMTcuMDM0VjI4LjdIMTc2Ljg1OFYxNy40NTJDMTc2Ljg1OCAxNC41NjQgMTc1LjE4NiAxMy4wNDQgMTcyLjYwMiAxMy4wNDRDMTY5LjkwNCAxMy4wNDQgMTY3Ljc3NiAxNC42NCAxNjcuNzc2IDE4LjUxNlYyOC43SDE2My42NzJWOS42OTk5NkgxNjcuNzc2VjEyLjEzMkMxNjkuMDMgMTAuMTU2IDE3MS4wODIgOS4yMDU5NiAxNzMuNjY2IDkuMjA1OTZaTTIwMC40MTggMi4wOTk5NkgyMDQuNTIyVjI4LjdIMjAwLjQxOFYyNS45NjRDMTk4Ljk3NCAyNy45NzggMTk2LjczMiAyOS4xOTQgMTkzLjc2OCAyOS4xOTRDMTg4LjYgMjkuMTk0IDE4NC4zMDYgMjQuODI0IDE4NC4zMDYgMTkuMkMxODQuMzA2IDEzLjUzOCAxODguNiA5LjIwNTk2IDE5My43NjggOS4yMDU5NkMxOTYuNzMyIDkuMjA1OTYgMTk4Ljk3NCAxMC40MjIgMjAwLjQxOCAxMi4zOThWMi4wOTk5NlpNMTk0LjQxNCAyNS4yOEMxOTcuODM0IDI1LjI4IDIwMC40MTggMjIuNzM0IDIwMC40MTggMTkuMkMyMDAuNDE4IDE1LjY2NiAxOTcuODM0IDEzLjEyIDE5NC40MTQgMTMuMTJDMTkwLjk5NCAxMy4xMiAxODguNDEgMTUuNjY2IDE4OC40MSAxOS4yQzE4OC40MSAyMi43MzQgMTkwLjk5NCAyNS4yOCAxOTQuNDE0IDI1LjI4Wk0yMTguMjc4IDI5LjE5NEMyMTIuNTQgMjkuMTk0IDIwOC4yNDYgMjQuODI0IDIwOC4yNDYgMTkuMkMyMDguMjQ2IDEzLjUzOCAyMTIuNTQgOS4yMDU5NiAyMTguMjc4IDkuMjA1OTZDMjIyLjAwMiA5LjIwNTk2IDIyNS4yMzIgMTEuMTQ0IDIyNi43NTIgMTQuMTA4TDIyMy4yMTggMTYuMTZDMjIyLjM4MiAxNC4zNzQgMjIwLjUyIDEzLjIzNCAyMTguMjQgMTMuMjM0QzIxNC44OTYgMTMuMjM0IDIxMi4zNSAxNS43OCAyMTIuMzUgMTkuMkMyMTIuMzUgMjIuNjIgMjE0Ljg5NiAyNS4xNjYgMjE4LjI0IDI1LjE2NkMyMjAuNTIgMjUuMTY2IDIyMi4zODIgMjMuOTg4IDIyMy4yOTQgMjIuMjRMMjI2LjgyOCAyNC4yNTRDMjI1LjIzMiAyNy4yNTYgMjIyLjAwMiAyOS4xOTQgMjE4LjI3OCAyOS4xOTRaTTIzMy41OTIgMTQuOTQ0QzIzMy41OTIgMTguNDAyIDI0My44MTQgMTYuMzEyIDI0My44MTQgMjMuMzQyQzI0My44MTQgMjcuMTQyIDI0MC41MDggMjkuMTk0IDIzNi40MDQgMjkuMTk0QzIzMi42MDQgMjkuMTk0IDIyOS44NjggMjcuNDg0IDIyOC42NTIgMjQuNzQ4TDIzMi4xODYgMjIuNjk2QzIzMi43OTQgMjQuNDA2IDIzNC4zMTQgMjUuNDMyIDIzNi40MDQgMjUuNDMyQzIzOC4yMjggMjUuNDMyIDIzOS42MzQgMjQuODI0IDIzOS42MzQgMjMuMzA0QzIzOS42MzQgMTkuOTIyIDIyOS40MTIgMjEuODIyIDIyOS40MTIgMTUuMDJDMjI5LjQxMiAxMS40NDggMjMyLjQ5IDkuMjA1OTYgMjM2LjM2NiA5LjIwNTk2QzIzOS40ODIgOS4yMDU5NiAyNDIuMDY2IDEwLjY1IDI0My4zOTYgMTMuMTU4TDIzOS45MzggMTUuMDk2QzIzOS4yNTQgMTMuNjE0IDIzNy45MjQgMTIuOTMgMjM2LjM2NiAxMi45M0MyMzQuODg0IDEyLjkzIDIzMy41OTIgMTMuNTc2IDIzMy41OTIgMTQuOTQ0Wk0yNTEuMTEgMTQuOTQ0QzI1MS4xMSAxOC40MDIgMjYxLjMzMiAxNi4zMTIgMjYxLjMzMiAyMy4zNDJDMjYxLjMzMiAyNy4xNDIgMjU4LjAyNiAyOS4xOTQgMjUzLjkyMiAyOS4xOTRDMjUwLjEyMiAyOS4xOTQgMjQ3LjM4NiAyNy40ODQgMjQ2LjE3IDI0Ljc0OEwyNDkuNzA0IDIyLjY5NkMyNTAuMzEyIDI0LjQwNiAyNTEuODMyIDI1LjQzMiAyNTMuOTIyIDI1LjQzMkMyNTUuNzQ2IDI1LjQzMiAyNTcuMTUyIDI0LjgyNCAyNTcuMTUyIDIzLjMwNEMyNTcuMTUyIDE5LjkyMiAyNDYuOTMgMjEuODIyIDI0Ni45MyAxNS4wMkMyNDYuOTMgMTEuNDQ4IDI1MC4wMDggOS4yMDU5NiAyNTMuODg0IDkuMjA1OTZDMjU3IDkuMjA1OTYgMjU5LjU4NCAxMC42NSAyNjAuOTE0IDEzLjE1OEwyNTcuNDU2IDE1LjA5NkMyNTYuNzcyIDEzLjYxNCAyNTUuNDQyIDEyLjkzIDI1My44ODQgMTIuOTNDMjUyLjQwMiAxMi45MyAyNTEuMTEgMTMuNTc2IDI1MS4xMSAxNC45NDRaIiBmaWxsPSJ3aGl0ZSIvPjwvc3ZnPgo=" class="h-8" alt="Tailwind CSS Logo" />
 </a>
 <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
 <span class="sr-only">Open main menu</span>
 <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
 </svg>
 </button>
 <div class="hidden w-full md:block md:w-auto" id="navbar-default">
 <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
 <li>
 <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a>
 </li>
 <li>
 <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
 </li>
 <li>
 <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
 </li>
 <li>
 <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
 </li>
 <li>
 <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
 </li>
 </ul>
 </div>
 </div>
</nav>