SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html lang="en">3 <head>4 <style>5 /*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border:0 solid #e5e7eb}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit;border-top-width:1px}strong{font-weight:bolder}code,pre{font-size:1em}small{font-size:80%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline;bottom:-.25em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;line-height:inherit;color:inherit}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:dotted 1px;outline:-webkit-focus-ring-color auto 5px}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}img{border-style:solid;max-width:100%;height:auto}textarea{resize:vertical}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{opacity:1;color:#6b7280;opacity:1}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#6b7280;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#6b7280;opacity:1}input::-ms-input-placeholder,textarea::-ms-input-placeholder{opacity:1;color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{opacity:1;color:#6b7280;opacity:1}[role=button],button{cursor:pointer}h1,h2,h3,h4,h5{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}embed,img,object,svg{display:block;vertical-align:middle}[multiple],[type=date],[type=email],[type=number],[type=password],[type=search],[type=text],[type=time],[type=url],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[multiple]:focus,[type=date]:focus,[type=email]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,select:focus,textarea:focus{outline:transparent solid 2px;outline-offset:2px;--tw-ring-inset:var(--tw-empty, );/*!*//*!*/--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#1c64f2;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;border-color:#1c64f2}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact}[multiple]{background-image:none;background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;color-adjust:unset}[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-negative:0;flex-shrink:0;height:1rem;width:1rem;color:#1c64f2;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0}[type=checkbox]:focus{outline:transparent solid 2px;outline-offset:2px;--tw-ring-inset:var(--tw-empty, );/*!*//*!*/--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#1c64f2;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent}[type=checkbox]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:-webkit-focus-ring-color auto 1px}.prose{color:#374151;max-width:65ch;font-size:1rem;line-height:1.75}.prose [class~=lead]{color:#4b5563;font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose a{font-weight:600}.prose strong{color:#161e2e;font-weight:600}.prose ol{counter-reset:list-counter;margin-top:1.25em;margin-bottom:1.25em}.prose ol>li{position:relative;counter-increment:list-counter;padding-left:1.75em}.prose ol>li::before{content:counter(list-counter) ".";position:absolute;font-weight:400;color:#6b7280}.prose ul>li{position:relative;padding-left:1.75em}.prose ul>li::before{content:"";position:absolute;background-color:#d2d6dc;border-radius:50%;width:.375em;height:.375em;top:calc(.875em - .1875em);left:.25em}.prose hr{border-color:#e5e7eb;border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose blockquote{font-weight:500;font-style:italic;color:#161e2e;border-left-width:.25rem;border-left-color:#e5e7eb;quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose blockquote p:first-of-type::before{content:open-quote}.prose blockquote p:last-of-type::after{content:close-quote}.prose h1{font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose h2{font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose h3{font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose h4{font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose figure figcaption{color:#6b7280;font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose code{color:#161e2e;font-weight:600;font-size:.875em}.prose code::after,.prose code::before{content:"`"}.prose pre{color:#e5e7eb;background-color:#252f3f;overflow-x:auto;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em}.prose pre code{background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:400;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose pre code::after,.prose pre code::before{content:""}.prose table{width:100%;table-layout:auto;text-align:left;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose p{margin-top:1.25em;margin-bottom:1.25em}.prose figure,.prose img{margin-top:2em;margin-bottom:2em}.prose figure>*{margin-top:0;margin-bottom:0}.prose h2 code{font-size:.875em}.prose h3 code{font-size:.9em}.prose ul{margin-top:1.25em;margin-bottom:1.25em}.prose li{margin-top:.5em;margin-bottom:.5em}.prose ol>li:before{left:0}.prose>ul>li p{margin-top:.75em;margin-bottom:.75em}.prose>ul>li>:first-child{margin-top:1.25em}.prose>ul>li>:last-child{margin-bottom:1.25em}.prose>ol>li>:first-child{margin-top:1.25em}.prose>ol>li>:last-child{margin-bottom:1.25em}.prose ol ol,.prose ol ul,.prose ul ol,.prose ul ul{margin-top:.75em;margin-bottom:.75em}.prose h2+*,.prose h3+*,.prose h4+*,.prose hr+*,.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.prose h1,.prose h2,.prose h3,.prose h4{color:#161e2e}.prose-lg{font-size:1.125rem;line-height:1.7777778}.prose-lg p{margin-top:1.3333333em;margin-bottom:1.3333333em}.prose-lg [class~=lead]{font-size:1.2222222em;line-height:1.4545455;margin-top:1.0909091em;margin-bottom:1.0909091em}.prose-lg blockquote{margin-top:1.6666667em;margin-bottom:1.6666667em;padding-left:1em}.prose-lg h1{font-size:2.6666667em;margin-top:0;margin-bottom:.8333333em;line-height:1}.prose-lg h2{font-size:1.6666667em;margin-top:1.8666667em;margin-bottom:1.0666667em;line-height:1.3333333}.prose-lg h3{font-size:1.3333333em;margin-top:1.6666667em;margin-bottom:.6666667em;line-height:1.5}.prose-lg h4{margin-top:1.7777778em;margin-bottom:.4444444em;line-height:1.5555556}.prose-lg figure,.prose-lg img{margin-top:1.7777778em;margin-bottom:1.7777778em}.prose-lg figure>*{margin-top:0;margin-bottom:0}.prose-lg figure figcaption{font-size:.8888889em;line-height:1.5;margin-top:1em}.prose-lg code{font-size:.8888889em}.prose-lg h2 code{font-size:.8666667em}.prose-lg h3 code{font-size:.875em}.prose-lg pre{font-size:.8888889em;line-height:1.75;margin-top:2em;margin-bottom:2em;border-radius:.375rem;padding:1em 1.5em}.prose-lg ol,.prose-lg ul{margin-top:1.3333333em;margin-bottom:1.3333333em}.prose-lg li{margin-top:.6666667em;margin-bottom:.6666667em}.prose-lg ol>li{padding-left:1.6666667em}.prose-lg ol>li:before{left:0}.prose-lg ul>li{padding-left:1.6666667em}.prose-lg ul>li::before{width:.3333333em;height:.3333333em;top:calc(.8888889em - .1666667em);left:.2222222em}.prose-lg>ul>li p{margin-top:.8888889em;margin-bottom:.8888889em}.prose-lg>ul>li>:first-child{margin-top:1.3333333em}.prose-lg>ul>li>:last-child{margin-bottom:1.3333333em}.prose-lg>ol>li>:first-child{margin-top:1.3333333em}.prose-lg>ol>li>:last-child{margin-bottom:1.3333333em}.prose-lg ol ol,.prose-lg ol ul,.prose-lg ul ol,.prose-lg ul ul{margin-top:.8888889em;margin-bottom:.8888889em}.prose-lg hr{margin-top:3.1111111em;margin-bottom:3.1111111em}.prose-lg h2+*,.prose-lg h3+*,.prose-lg h4+*,.prose-lg hr+*{margin-top:0}.prose-lg table{font-size:.8888889em;line-height:1.5}.prose-lg>:first-child{margin-top:0}.prose-lg>:last-child{margin-bottom:0}.prose a{color:#b7580c;text-decoration:underline}.prose a:hover{color:#9f290b}.prose ul>li>:first-child,.prose ul>li>:last-child{margin-top:0;margin-bottom:0}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.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)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem * var(--tw-space-y-reverse))}.space-x-12>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(3rem * var(--tw-space-x-reverse));margin-left:calc(3rem * calc(1 - var(--tw-space-x-reverse)))}.-space-x-px>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(-1px * var(--tw-space-x-reverse));margin-left:calc(-1px * calc(1 - var(--tw-space-x-reverse)))}.divide-y-2>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(2px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(2px * var(--tw-divide-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgba(244,245,247,var(--tw-divide-opacity))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgba(229,231,235,var(--tw-divide-opacity))}.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}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgba(244,245,247,var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgba(210,214,220,var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgba(159,166,178,var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgba(22,30,46,var(--tw-bg-opacity))}.bg-yellow-50{--tw-bg-opacity:1;background-color:rgba(253,253,234,var(--tw-bg-opacity))}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgba(253,246,178,var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgba(243,250,247,var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgba(222,247,236,var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgba(14,159,110,var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgba(235,245,255,var(--tw-bg-opacity))}.bg-aqua-haze-2{--tw-bg-opacity:1;background-color:rgba(228,235,233,var(--tw-bg-opacity))}.bg-aqua-island{--tw-bg-opacity:1;background-color:rgba(153,219,202,var(--tw-bg-opacity))}.bg-deep-sea{--tw-bg-opacity:1;background-color:rgba(0,140,105,var(--tw-bg-opacity))}.bg-spring-wood{--tw-bg-opacity:1;background-color:rgba(246,242,238,var(--tw-bg-opacity))}.bg-champagne{--tw-bg-opacity:1;background-color:rgba(250,232,216,var(--tw-bg-opacity))}.bg-gold-sand{--tw-bg-opacity:1;background-color:rgba(230,184,148,var(--tw-bg-opacity))}.bg-meteor{--tw-bg-opacity:1;background-color:rgba(207,100,14,var(--tw-bg-opacity))}.bg-pumpkin-skin{--tw-bg-opacity:1;background-color:rgba(183,88,12,var(--tw-bg-opacity))}.bg-rich-gold{--tw-bg-opacity:1;background-color:rgba(159,77,11,var(--tw-bg-opacity))}.bg-nandor{--tw-bg-opacity:1;background-color:rgba(84,95,92,var(--tw-bg-opacity))}.bg-mine-shaft{--tw-bg-opacity:1;background-color:rgba(49,49,49,var(--tw-bg-opacity))}.bg-lightest-red{--tw-bg-opacity:1;background-color:rgba(238,173,173,var(--tw-bg-opacity))}.bg-light-red{--tw-bg-opacity:1;background-color:rgba(202,81,83,var(--tw-bg-opacity))}.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgba(0,0,0,var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgba(244,245,247,var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.hover\:bg-red:hover{--tw-bg-opacity:1;background-color:rgba(135,15,18,var(--tw-bg-opacity))}.hover\:bg-aqua-island:hover{--tw-bg-opacity:1;background-color:rgba(153,219,202,var(--tw-bg-opacity))}.hover\:bg-aqua-deep:hover{--tw-bg-opacity:1;background-color:rgba(0,92,69,var(--tw-bg-opacity))}.hover\:bg-gold-sand:hover{--tw-bg-opacity:1;background-color:rgba(230,184,148,var(--tw-bg-opacity))}.hover\:bg-whiskey:hover{--tw-bg-opacity:1;background-color:rgba(216,156,109,var(--tw-bg-opacity))}.hover\:bg-pumpkin-skin:hover{--tw-bg-opacity:1;background-color:rgba(183,88,12,var(--tw-bg-opacity))}.hover\:bg-rich-gold:hover{--tw-bg-opacity:1;background-color:rgba(159,77,11,var(--tw-bg-opacity))}.hover\:bg-totem-pole:hover{--tw-bg-opacity:1;background-color:rgba(159,41,11,var(--tw-bg-opacity))}.active\:bg-gray-50:active,.focus\:bg-gray-50:focus{--tw-bg-opacity:1;background-color:rgba(249,250,251,var(--tw-bg-opacity))}.bg-opacity-75{--tw-bg-opacity:0.75}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgba(255,255,255,var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity:1;border-color:rgba(244,245,247,var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgba(210,214,220,var(--tw-border-opacity))}.border-red{--tw-border-opacity:1;border-color:rgba(135,15,18,var(--tw-border-opacity))}.border-blue-200{--tw-border-opacity:1;border-color:rgba(195,221,253,var(--tw-border-opacity))}.border-deep-sea{--tw-border-opacity:1;border-color:rgba(0,140,105,var(--tw-border-opacity))}.border-aqua-deep{--tw-border-opacity:1;border-color:rgba(0,92,69,var(--tw-border-opacity))}.border-pumpkin-skin{--tw-border-opacity:1;border-color:rgba(183,88,12,var(--tw-border-opacity))}.border-rich-gold{--tw-border-opacity:1;border-color:rgba(159,77,11,var(--tw-border-opacity))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgba(210,214,220,var(--tw-border-opacity))}.focus\:border-transparent:focus{border-color:transparent}.focus\:border-gray-900:focus{--tw-border-opacity:1;border-color:rgba(22,30,46,var(--tw-border-opacity))}.focus\:border-blue-300:focus{--tw-border-opacity:1;border-color:rgba(164,202,254,var(--tw-border-opacity))}.focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgba(104,117,245,var(--tw-border-opacity))}.focus\:border-whiskey:focus{--tw-border-opacity:1;border-color:rgba(216,156,109,var(--tw-border-opacity))}.focus\:border-meteor:focus{--tw-border-opacity:1;border-color:rgba(207,100,14,var(--tw-border-opacity))}.rounded-none{border-radius:0}.rounded-sm{border-radius:.125rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-tl{border-top-left-radius:.25rem}.border-dashed{border-style:dashed}.border-2{border-width:2px}.border-4{border-width:4px}.border{border-width:1px}.border-r-0{border-right-width:0}.border-t-2{border-top-width:2px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-b{border-bottom-width:1px}.cursor-pointer{cursor:pointer}.block{display:block}.inline-block{display:inline-block}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.inline-flex{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.table{display:table}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.flex-col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.items-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.items-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.flex-1{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1 0%}.flex-grow{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.flex-shrink-0{-ms-flex-negative:0;flex-shrink:0}.float-right{float:right}.font-light{font-weight:300}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.h-1{height:.25rem}.h-3{height:.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-48{height:12rem}.h-96{height:24rem}.h-full{height:100%}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-8{line-height:2rem}.leading-9{line-height:2.25rem}.list-inside{list-style-position:inside}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.m-0{margin:0}.m-2{margin:.5rem}.-m-3{margin:-.75rem}.my-0{margin-top:0;margin-bottom:0}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.my-8{margin-top:2rem;margin-bottom:2rem}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.mx-auto{margin-left:auto;margin-right:auto}.-my-2{margin-top:-.5rem;margin-bottom:-.5rem}.-mx-5{margin-left:-1.25rem;margin-right:-1.25rem}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mr-1{margin-right:.25rem}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.mt-3{margin-top:.75rem}.ml-3{margin-left:.75rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.mt-10{margin-top:2.5rem}.mb-10{margin-bottom:2.5rem}.mt-12{margin-top:3rem}.mb-12{margin-bottom:3rem}.mt-16{margin-top:4rem}.mt-20{margin-top:5rem}.mb-20{margin-bottom:5rem}.mt-0\.5{margin-top:.125rem}.-mr-1{margin-right:-.25rem}.-ml-1{margin-left:-.25rem}.-mr-2{margin-right:-.5rem}.-ml-4{margin-left:-1rem}.-mb-8{margin-bottom:-2rem}.-mr-48{margin-right:-12rem}.-mb-px{margin-bottom:-1px}.-ml-px{margin-left:-1px}.-ml-3\.5{margin-left:-.875rem}.max-w-none{max-width:none}.max-w-xs{max-width:20rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-prose{max-width:65ch}.max-w-screen-xl{max-width:1280px}.min-h-screen{min-height:100vh}.min-w-0{min-width:0}.object-cover{-o-object-fit:cover;object-fit:cover}.opacity-0{opacity:0}.opacity-100{opacity:1}.focus-within\:outline-none:focus-within{outline:transparent solid 2px;outline-offset:2px}.focus\:outline-none:focus{outline:transparent solid 2px;outline-offset:2px}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-10{padding:2.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.px-1{padding-left:.25rem;padding-right:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-px{padding-top:1px;padding-bottom:1px}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.pl-1{padding-left:.25rem}.pt-2{padding-top:.5rem}.pr-2{padding-right:.5rem}.pb-2{padding-bottom:.5rem}.pr-3{padding-right:.75rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.pt-4{padding-top:1rem}.pr-4{padding-right:1rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-8{padding-left:2rem}.pt-10{padding-top:2.5rem}.pr-10{padding-right:2.5rem}.pb-10{padding-bottom:2.5rem}.pt-12{padding-top:3rem}.pb-12{padding-bottom:3rem}.pb-14{padding-bottom:3.5rem}.pt-16{padding-top:4rem}.pr-16{padding-right:4rem}.pb-16{padding-bottom:4rem}.pb-32{padding-bottom:8rem}.placeholder-gray-400::-webkit-input-placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.placeholder-gray-400:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.placeholder-gray-400::-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.placeholder-gray-500::-webkit-input-placeholder{--tw-placeholder-opacity:1;color:rgba(107,114,128,var(--tw-placeholder-opacity))}.placeholder-gray-500::-moz-placeholder{--tw-placeholder-opacity:1;color:rgba(107,114,128,var(--tw-placeholder-opacity))}.placeholder-gray-500:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgba(107,114,128,var(--tw-placeholder-opacity))}.placeholder-gray-500::-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgba(107,114,128,var(--tw-placeholder-opacity))}.placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgba(107,114,128,var(--tw-placeholder-opacity))}.focus\:placeholder-gray-400:focus::-webkit-input-placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.focus\:placeholder-gray-400:focus::-moz-placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.focus\:placeholder-gray-400:focus:-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.focus\:placeholder-gray-400:focus::-ms-input-placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.focus\:placeholder-gray-400:focus::placeholder{--tw-placeholder-opacity:1;color:rgba(159,166,178,var(--tw-placeholder-opacity))}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.inset-y-0{top:0;bottom:0}.inset-x-0{right:0;left:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-7{top:1.75rem}.top-12{top:3rem}.bottom-12{bottom:3rem}.top-1\/2{top:50%}.left-1\/2{left:50%}.right-full{right:100%}.left-full{left:100%}.resize{resize:both}*{--tw-shadow:0 0 rgba(0,0,0,0);--tw-ring-inset:var(--tw-empty, );/*!*//*!*/--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(63, 131, 248, 0.5);--tw-ring-offset-shadow:0 0 rgba(0,0,0,0);--tw-ring-shadow:0 0 rgba(0,0,0,0)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);-webkit-box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);-webkit-box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);-webkit-box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);-webkit-box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);-webkit-box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow)}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);-webkit-box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow)}.focus\:shadow-outline-blue:focus{--tw-shadow:0 0 0 3px rgba(164, 202, 254, 0.45);-webkit-box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow);box-shadow:0 0 transparent,0 0 transparent,var(--tw-shadow)}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent}.ring-8{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 transparent}.focus\:ring-inset:focus{--tw-ring-inset:inset}.focus\:ring-offset-gray-100:focus{--tw-ring-offset-color:#f4f5f7}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width:2px}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.ring-white{--tw-ring-opacity:1;--tw-ring-color:rgba(255, 255, 255, var(--tw-ring-opacity))}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgba(0, 0, 0, var(--tw-ring-opacity))}.focus-within\:ring-deep-sea:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgba(0, 140, 105, var(--tw-ring-opacity))}.focus\:ring-gray-900:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(22, 30, 46, var(--tw-ring-opacity))}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(104, 117, 245, var(--tw-ring-opacity))}.focus\:ring-deep-sea:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(0, 140, 105, var(--tw-ring-opacity))}.focus\:ring-whiskey:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(216, 156, 109, var(--tw-ring-opacity))}.focus\:ring-meteor:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(207, 100, 14, var(--tw-ring-opacity))}.focus\:ring-pumpkin-skin:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(183, 88, 12, var(--tw-ring-opacity))}.focus\:ring-rich-gold:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(159, 77, 11, var(--tw-ring-opacity))}.focus\:ring-light-red:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(202, 81, 83, var(--tw-ring-opacity))}.ring-opacity-5{--tw-ring-opacity:0.05}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-gray-100{--tw-text-opacity:1;color:rgba(244,245,247,var(--tw-text-opacity))}.text-gray-200{--tw-text-opacity:1;color:rgba(229,231,235,var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgba(210,214,220,var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgba(159,166,178,var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgba(107,114,128,var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgba(75,85,99,var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgba(55,65,81,var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgba(37,47,63,var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgba(22,30,46,var(--tw-text-opacity))}.text-red{--tw-text-opacity:1;color:rgba(135,15,18,var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgba(227,160,8,var(--tw-text-opacity))}.text-yellow-700{--tw-text-opacity:1;color:rgba(142,75,16,var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity:1;color:rgba(114,59,19,var(--tw-text-opacity))}.text-green-400{--tw-text-opacity:1;color:rgba(49,196,141,var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgba(14,159,110,var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgba(4,108,78,var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgba(3,84,63,var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgba(118,169,250,var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgba(26,86,219,var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity:1;color:rgba(30,66,159,var(--tw-text-opacity))}.text-indigo-50{--tw-text-opacity:1;color:rgba(240,245,255,var(--tw-text-opacity))}.text-indigo-200{--tw-text-opacity:1;color:rgba(205,219,254,var(--tw-text-opacity))}.text-jade{--tw-text-opacity:1;color:rgba(0,166,124,var(--tw-text-opacity))}.text-deep-sea{--tw-text-opacity:1;color:rgba(0,140,105,var(--tw-text-opacity))}.text-aqua-deep{--tw-text-opacity:1;color:rgba(0,92,69,var(--tw-text-opacity))}.text-champagne{--tw-text-opacity:1;color:rgba(250,232,216,var(--tw-text-opacity))}.text-meteor{--tw-text-opacity:1;color:rgba(207,100,14,var(--tw-text-opacity))}.text-rich-gold{--tw-text-opacity:1;color:rgba(159,77,11,var(--tw-text-opacity))}.text-nandor{--tw-text-opacity:1;color:rgba(84,95,92,var(--tw-text-opacity))}.text-dark-red{--tw-text-opacity:1;color:rgba(84,10,12,var(--tw-text-opacity))}.group:hover .group-hover\:text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgba(107,114,128,var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgba(55,65,81,var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgba(22,30,46,var(--tw-text-opacity))}.hover\:text-indigo-100:hover{--tw-text-opacity:1;color:rgba(229,237,255,var(--tw-text-opacity))}.hover\:text-deep-sea:hover{--tw-text-opacity:1;color:rgba(0,140,105,var(--tw-text-opacity))}.hover\:text-aqua-deep:hover{--tw-text-opacity:1;color:rgba(0,92,69,var(--tw-text-opacity))}.hover\:text-gold-sand:hover{--tw-text-opacity:1;color:rgba(230,184,148,var(--tw-text-opacity))}.hover\:text-rich-gold:hover{--tw-text-opacity:1;color:rgba(159,77,11,var(--tw-text-opacity))}.focus-within\:text-gray-600:focus-within{--tw-text-opacity:1;color:rgba(75,85,99,var(--tw-text-opacity))}.active\:text-gray-800:active{--tw-text-opacity:1;color:rgba(37,47,63,var(--tw-text-opacity))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.not-italic{font-style:normal}.uppercase{text-transform:uppercase}.hover\:underline:hover,.underline{text-decoration:underline}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.visible{visibility:visible}.whitespace-nowrap{white-space:nowrap}.w-0{width:0}.w-3{width:.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-56{width:14rem}.w-64{width:16rem}.w-0\.5{width:.125rem}.w-1\/2{width:50%}.w-full{width:100%}.w-screen{width:100vw}.z-0{z-index:0}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.gap-5{grid-gap:1.25rem;gap:1.25rem}.gap-6{grid-gap:1.5rem;gap:1.5rem}.gap-16{grid-gap:4rem;gap:4rem}.gap-y-6{grid-row-gap:1.5rem;row-gap:1.5rem}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.transform{--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;-webkit-transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.origin-top-right{-webkit-transform-origin:top right;transform-origin:top right}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.translate-x-0{--tw-translate-x:0}.translate-x-5{--tw-translate-x:1.25rem}.translate-x-32{--tw-translate-x:8rem}.-translate-x-3{--tw-translate-x:-0.75rem}.-translate-x-32{--tw-translate-x:-8rem}.-translate-x-1\/2{--tw-translate-x:-50%}.translate-y-0{--tw-translate-y:0}.translate-y-1{--tw-translate-y:0.25rem}.translate-y-px{--tw-translate-y:1px}.-translate-y-2{--tw-translate-y:-0.5rem}.-translate-y-1\/2{--tw-translate-y:-50%}.transition-all{-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:150ms;transition-duration:150ms}.transition{-webkit-transition-property:background-color,border-color,color,fill,stroke,opacity,-webkit-box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-box-shadow,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:150ms;transition-duration:150ms}.transition-colors{-webkit-transition-property:background-color,border-color,color,fill,stroke;transition-property:background-color,border-color,color,fill,stroke;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:150ms;transition-duration:150ms}.transition-opacity{-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-duration:150ms;transition-duration:150ms}.ease-in{-webkit-transition-timing-function:cubic-bezier(.4,0,1,1);transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{-webkit-transition-timing-function:cubic-bezier(0,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1)}.ease-in-out{-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-75{-webkit-transition-duration:75ms;transition-duration:75ms}.duration-100{-webkit-transition-duration:.1s;transition-duration:.1s}.duration-150{-webkit-transition-duration:150ms;transition-duration:150ms}.duration-200{-webkit-transition-duration:.2s;transition-duration:.2s}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ping{100%,75%{-webkit-transform:scale(2);transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,100%{-webkit-transform:translateY(-25%);transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{-webkit-transform:none;transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.filter{--tw-blur:var(--tw-empty, );/*!*//*!*/--tw-brightness:var(--tw-empty, );/*!*//*!*/--tw-contrast:var(--tw-empty, );/*!*//*!*/--tw-grayscale:var(--tw-empty, );/*!*//*!*/--tw-hue-rotate:var(--tw-empty, );/*!*//*!*/--tw-invert:var(--tw-empty, );/*!*//*!*/--tw-saturate:var(--tw-empty, );/*!*//*!*/--tw-sepia:var(--tw-empty, );/*!*//*!*/--tw-drop-shadow:var(--tw-empty, );/*!*//*!*/-webkit-filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}[type=button],[type=text]{-webkit-appearance:none}.documentation__content{padding-bottom:calc(100vh - 100px)}.documentation__content-prose{max-width:none}@media (min-width:1024px){.documentation__navs{height:calc(100vh - 45px);top:45px}}.issue-display__container{max-width:calc(100vw - 40px)}@media (min-width:768px){.issue-display__container{max-width:calc(100vw - 340px)}.md\:width-1\/2--space-right{width:calc(50% - 5px);margin-right:5px}.md\:width-1\/2--space-left{width:calc(50% - 5px);margin-left:5px}}.note p:first-child{margin-top:0}.note p:last-child{margin-bottom:0}.border-t-6{border-top-width:6px}.min-h-screen-minus-header-and-footer{min-height:calc(100vh - 270px)}.max-w-8xl{max-width:88rem}.max-w-9xl{max-width:96rem}.text-black-important{color:#000!important}@media (min-width:640px){.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.sm\:space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.sm\:border-gray-200{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.sm\:rounded-md{border-radius:.375rem}.sm\:rounded-lg{border-radius:.5rem}.sm\:border-t{border-top-width:1px}.sm\:block{display:block}.sm\:inline-block{display:inline-block}.sm\:flex{display:-webkit-box;display:-ms-flexbox;display:flex}.sm\:grid{display:grid}.sm\:hidden{display:none}.sm\:items-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.sm\:items-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sm\:justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.sm\:justify-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.sm\:flex-1{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1 0%}.sm\:h-10{height:2.5rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:mx-auto{margin-left:auto;margin-right:auto}.sm\:-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.sm\:mt-0{margin-top:0}.sm\:mb-0{margin-bottom:0}.sm\:mr-1{margin-right:.25rem}.sm\:ml-1{margin-left:.25rem}.sm\:ml-2{margin-left:.5rem}.sm\:mt-4{margin-top:1rem}.sm\:mt-12{margin-top:3rem}.sm\:mt-16{margin-top:4rem}.sm\:mt-px{margin-top:1px}.sm\:max-w-xs{max-width:20rem}.sm\:max-w-md{max-width:28rem}.sm\:max-w-xl{max-width:36rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:p-10{padding:2.5rem}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:px-16{padding-left:4rem;padding-right:4rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:py-24{padding-top:6rem;padding-bottom:6rem}.sm\:pt-2{padding-top:.5rem}.sm\:pt-5{padding-top:1.25rem}.sm\:pl-6{padding-left:1.5rem}.sm\:pt-10{padding-top:2.5rem}.sm\:pb-14{padding-bottom:3.5rem}.sm\:text-center{text-align:center}.sm\:tracking-tight{letter-spacing:-.025em}.sm\:w-auto{width:auto}.sm\:w-full{width:100%}.sm\:gap-4{grid-gap:1rem;gap:1rem}.sm\:gap-8{grid-gap:2rem;gap:2rem}.sm\:gap-x-6{grid-column-gap:1.5rem;-webkit-column-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}.sm\:gap-x-8{grid-column-gap:2rem;-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.sm\:gap-y-12{grid-row-gap:3rem;row-gap:3rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:col-span-2{grid-column:span 2/span 2}}@media (min-width:768px){.md\:space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2.5rem * var(--tw-space-x-reverse));margin-left:calc(2.5rem * calc(1 - var(--tw-space-x-reverse)))}.md\:border-aqua-deep{--tw-border-opacity:1;border-color:rgba(0,92,69,var(--tw-border-opacity))}.md\:border-t-0{border-top-width:0}.md\:border-r{border-right-width:1px}.md\:border-l{border-left-width:1px}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:-webkit-box;display:-ms-flexbox;display:flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:flex-col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.md\:items-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.md\:justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.md\:justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.md\:flex-grow{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.md\:flex-shrink-0{-ms-flex-negative:0;flex-shrink:0}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:mb-0{margin-bottom:0}.md\:ml-0{margin-left:0}.md\:mt-5{margin-top:1.25rem}.md\:-mr-16{margin-right:-4rem}.md\:max-w-3xl{max-width:48rem}.md\:p-8{padding:2rem}.md\:px-0{padding-left:0;padding-right:0}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:pr-0{padding-right:0}.md\:pl-0{padding-left:0}.md\:pr-10{padding-right:2.5rem}.md\:pl-10{padding-left:2.5rem}.md\:pl-56{padding-left:14rem}.md\:fixed{position:fixed}.md\:absolute{position:absolute}.md\:inset-y-0{top:0;bottom:0}.md\:right-0{right:0}.md\:left-0{left:0}.md\:w-52{width:13rem}.md\:w-auto{width:auto}.md\:gap-4{grid-gap:1rem;gap:1rem}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.lg\:divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.lg\:divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgba(229,231,235,var(--tw-divide-opacity))}.lg\:rounded-none{border-radius:0}.lg\:rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.lg\:rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.lg\:block{display:block}.lg\:flex{display:-webkit-box;display:-ms-flexbox;display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:items-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.lg\:justify-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.lg\:flex-shrink-0{-ms-flex-negative:0;flex-shrink:0}.lg\:h-full{height:100%}.lg\:m-0{margin:0}.lg\:mx-0{margin-left:0;margin-right:0}.lg\:my-20{margin-top:5rem;margin-bottom:5rem}.lg\:mx-auto{margin-left:auto;margin-right:auto}.lg\:mt-0{margin-top:0}.lg\:ml-0{margin-left:0}.lg\:mt-24{margin-top:6rem}.lg\:mb-28{margin-bottom:7rem}.lg\:max-w-none{max-width:none}.lg\:max-w-2xl{max-width:42rem}.lg\:max-w-7xl{max-width:80rem}.lg\:p-6{padding:1.5rem}.lg\:px-0{padding-left:0;padding-right:0}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-12{padding-top:3rem;padding-bottom:3rem}.lg\:py-16{padding-top:4rem;padding-bottom:4rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:pb-10{padding-bottom:2.5rem}.lg\:pr-16{padding-right:4rem}.lg\:pb-16{padding-bottom:4rem}.lg\:pl-16{padding-left:4rem}.lg\:pt-20{padding-top:5rem}.lg\:pb-20{padding-bottom:5rem}.lg\:pb-28{padding-bottom:7rem}.lg\:pl-60{padding-left:15rem}.lg\:absolute{position:absolute}.lg\:relative{position:relative}.lg\:inset-y-0{top:0;bottom:0}.lg\:left-0{left:0}.lg\:left-1\/2{left:50%}.lg\:w-56{width:14rem}.lg\:w-auto{width:auto}.lg\:w-full{width:100%}.lg\:gap-24{grid-gap:6rem;gap:6rem}.lg\:gap-x-5{grid-column-gap:1.25rem;-webkit-column-gap:1.25rem;-moz-column-gap:1.25rem;column-gap:1.25rem}.lg\:gap-x-8{grid-column-gap:2rem;-webkit-column-gap:2rem;-moz-column-gap:2rem;column-gap:2rem}.lg\:gap-y-16{grid-row-gap:4rem;row-gap:4rem}.lg\:grid-flow-col-dense{grid-auto-flow:column dense}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-start-1{grid-column-start:1}.lg\:col-start-3{grid-column-start:3}.lg\:col-start-6{grid-column-start:6}.lg\:col-end-3{grid-column-end:3}.lg\:col-end-6{grid-column-end:6}.lg\:col-end-8{grid-column-end:8}.lg\:row-start-1{grid-row-start:1}.lg\:row-start-2{grid-row-start:2}.lg\:row-end-3{grid-row-end:3}.lg\:row-end-4{grid-row-end:4}.lg\:-translate-x-1\/2{--tw-translate-x:-50%}}@media (min-width:1280px){.xl\:border-gray-200{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.xl\:border-r{border-right-width:1px}.xl\:border-b{border-bottom-width:1px}.xl\:block{display:block}.xl\:grid{display:grid}.xl\:hidden{display:none}.xl\:mt-10{margin-top:2.5rem}.xl\:p-10{padding:2.5rem}.xl\:p-12{padding:3rem}.xl\:py-14{padding-top:3.5rem;padding-bottom:3.5rem}.xl\:pb-0{padding-bottom:0}.xl\:pt-6{padding-top:1.5rem}.xl\:pb-6{padding-bottom:1.5rem}.xl\:pr-8{padding-right:2rem}.xl\:pl-8{padding-left:2rem}.xl\:pt-10{padding-top:2.5rem}.xl\:pl-72{padding-left:18rem}.xl\:w-64{width:16rem}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:col-span-2{grid-column:span 2/span 2}}6 </style>7 <title>8 Specializing in Fine Web Software | BuzzingPixel9 </title>10 <meta charset="utf-8">11 <meta content="ie=edge" http-equiv="x-ua-compatible">12 <meta content="width=device-width, initial-scale=1" name="viewport">13 <meta content="#da532c" name="msapplication-TileColor">14 <meta content="#ffffff" name="theme-color">15 <meta content="/share.png" itemprop="image" property="og:image">16 </head>17 <body data-app-info='{18"csrf": {19"tokenNameKey": "csrf_name",20"tokenName": "csrf654441c08caa3",21"tokenValueKey": "csrf_value",22"tokenValue": "95a00195b781c8eb44c3a2554afd9753"23}24}'>25 <main class="min-h-screen bg-white">26 <div class="bg-aqua-island border-t-6 border-pumpkin-skin" data-name="MainMenu" x-data="{27data: {28mobileMenuIsActive: false,29userIsLoggedIn: false,30userIsAdmin: false,31userEmailAddress: '',32accountMenuIsActive: false,33}34}" x-init="RunWhenReady('MainNav', data)" xmlns:x-bind="" xmlns:x-transition="">35 <div class="relative pt-6 pb-6">36 <div class="max-w-7xl mx-auto px-4 sm:px-6">37 <nav aria-label="Global" class="relative flex items-center justify-between sm:h-10 md:justify-center">38 <div class="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">39 <div class="flex items-center justify-between w-full md:w-auto">40 <a>41 <span class="sr-only">42 BuzzingPixel43 </span>44 <span class="block text-gray-800 hover:text-black" style="width: 124px; height: 34px">45 </span>46 </a>47 <div class="-mr-2 flex items-center md:hidden">48 <button @click="data.mobileMenuIsActive = true" aria-haspopup="true" class="bg-gray-50 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2" id="main-menu" type="button">49 <span class="sr-only">50 Open main menu51 </span>52 </button>53 </div>54 </div>55 </div>56 <div class="hidden md:flex md:space-x-10">57 <div class="relative" x-data="{58subData: {59subMenuIsActive: false,60}61}">62 <button :class="{'text-black-important': subData.subMenuIsActive}" @click="subData.subMenuIsActive = !subData.subMenuIsActive" class="text-gray-700 hover:text-black group bg-transparent rounded-md inline-flex items-center text-base font-medium focus:outline-none" type="button" x-bind:aria-expanded="subData.subMenuIsActive">63 <span>64 Software65 </span>66 </button>67 <div @click.away="subData.subMenuIsActive = false" class="absolute z-10 -ml-4 mt-3 transform w-screen max-w-xs -translate-x-1/2 left-1/2 rounded-lg shadow-lg z-50" style="display: none;" x-show="subData.subMenuIsActive" x-transition:enter="transition ease-out duration-150" x-transition:enter-end="opacity-100 translate-y-0" x-transition:enter-start="opacity-0 translate-y-1" x-transition:leave="duration-100 ease-in" x-transition:leave-end="opacity-0 translate-y-1" x-transition:leave-start="opacity-100 translate-y-0">68 <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">69 <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">70 <a class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">71 <div>72 <p class="text-base font-medium text-gray-900">73 Ansel for Craft74 </p>75 </div>76 </a>77 <a class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">78 <div>79 <p class="text-base font-medium text-gray-900">80 Ansel for EE81 </p>82 </div>83 </a>84 <a class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">85 <div>86 <p class="text-base font-medium text-gray-900">87 Treasury88 </p>89 </div>90 </a>91 <a class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">92 <div>93 <p class="text-base font-medium text-gray-900">94 Construct95 </p>96 </div>97 </a>98 <a class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">99 <div>100 <p class="text-base font-medium text-gray-900">101 Category Construct102 </p>103 </div>104 </a>105 </div>106 </div>107 </div>108 </div>109 <div class="relative" x-data="{110subData: {111subMenuIsActive: false,112}113}">114 <button :class="{'text-black-important': subData.subMenuIsActive}" @click="subData.subMenuIsActive = !subData.subMenuIsActive" class="text-gray-700 hover:text-black group bg-transparent rounded-md inline-flex items-center text-base font-medium focus:outline-none" type="button" x-bind:aria-expanded="subData.subMenuIsActive">115 <span>116 Support117 </span>118 </button>119 <div @click.away="subData.subMenuIsActive = false" class="absolute z-10 -ml-4 mt-3 transform w-screen max-w-xs -translate-x-1/2 left-1/2 rounded-lg shadow-lg z-50" style="display: none;" x-show="subData.subMenuIsActive" x-transition:enter="transition ease-out duration-150" x-transition:enter-end="opacity-100 translate-y-0" x-transition:enter-start="opacity-0 translate-y-1" x-transition:leave="duration-100 ease-in" x-transition:leave-end="opacity-0 translate-y-1" x-transition:leave-start="opacity-100 translate-y-0">120 <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">121 <div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">122 <a class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">123 <div>124 <p class="text-base font-medium text-gray-900">125 Dashboard (open an issue here)126 </p>127 </div>128 </a>129 <a class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">130 <div>131 <p class="text-base font-medium text-gray-900">132 All Issues133 </p>134 </div>135 </a>136 <a class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100">137 <div>138 <p class="text-base font-medium text-gray-900">139 My Issues140 </p>141 </div>142 </a>143 </div>144 </div>145 </div>146 </div>147 <a class="font-medium text-gray-700 hover:text-black">148 News149 </a>150 <a class="font-medium text-gray-700 hover:text-black">151 Contact152 </a>153 </div>154 <div class="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0" data-name="AccountMenu">155 <div :class="{'hidden': data.userIsLoggedIn}">156 <span class="inline-flex rounded-md shadow">157 <a class="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-jade bg-white hover:bg-gray-100 hover:text-deep-sea">158 Log in159 </a>160 </span>161 </div>162 <div :class="{'hidden': !data.userIsLoggedIn}" class="relative z-50 hidden">163 <div class="relative inline-block text-left">164 <div>165 <button @click="data.accountMenuIsActive = !data.accountMenuIsActive" aria-haspopup="true" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100" id="options-menu" type="button" x-bind:aria-expanded="data.accountMenuIsActive">166 Account167 </button>168 </div>169 <div @click.away="data.accountMenuIsActive = false" aria-labelledby="options-menu" aria-orientation="vertical" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white divide-y divide-gray-100 focus:outline-none" role="menu" style="display: none;" x-show="data.accountMenuIsActive" x-transition:enter="duration-100 ease-out" x-transition:enter-end="opacity-100 scale-100" x-transition:enter-start="opacity-0 scale-95" x-transition:leave="duration-100 ease-in" x-transition:leave-end="opacity-0 scale-95" x-transition:leave-start="opacity-100 scale-100">170 <div class="px-4 py-3" role="none">171 <p class="text-sm" role="none">172 Logged in as173 </p>174 <p class="text-sm font-medium text-gray-900 truncate" role="none" x-text="data.userEmailAddress">175 </p>176 </div>177 <div class="py-1" role="none">178 <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">179 Licenses180 </a>181 <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">182 Purchases183 </a>184 <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">185 Profile186 </a>187 <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">188 Change Password189 </a>190 <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">191 Billing Portal192 </a>193 <a :class="{'hidden': !data.userIsAdmin}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 hidden" role="menuitem">194 Admin195 </a>196 </div>197 <div class="py-1" role="none">198 <a class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">199 Log Out200 </a>201 </div>202 </div>203 </div>204 </div>205 </div>206 </nav>207 </div>208 <div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden z-50" style="display: none;" x-show="data.mobileMenuIsActive" x-transition:enter="duration-150 ease-out" x-transition:enter-end="opacity-100 scale-100" x-transition:enter-start="opacity-0 scale-95" x-transition:leave="duration-100 ease-in" x-transition:leave-end="opacity-0 scale-95" x-transition:leave-start="opacity-100 scale-100">209 <div class="rounded-lg shadow-md bg-white overflow-hidden">210 <div class="px-5 pt-4 flex items-center justify-between">211 <div>212 <span class="block text-gray-800 hover:text-black" style="width: 124px; height: 34px">213 </span>214 </div>215 <div class="-mr-2">216 <button @click="data.mobileMenuIsActive = false" class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset" type="button">217 <span class="sr-only">218 Close main menu219 </span>220 </button>221 </div>222 </div>223 <div aria-labelledby="main-menu" aria-orientation="vertical" role="menu">224 <div class="px-2 pt-2 pb-3 space-y-1" role="none">225 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">226 Software227 </a>228 <div class="ml-4">229 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">230 Ansel for Craft231 </a>232 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">233 Ansel for EE234 </a>235 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">236 Treasury237 </a>238 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">239 Construct240 </a>241 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">242 Category Construct243 </a>244 </div>245 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">246 Support247 </a>248 <div class="ml-4">249 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">250 Dashboard (open an issue here)251 </a>252 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">253 All Issues254 </a>255 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">256 My Issues257 </a>258 </div>259 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">260 News261 </a>262 <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100" role="menuitem">263 Contact264 </a>265 </div>266 <div :class="{'hidden': data.userIsLoggedIn}" role="none">267 <a class="block w-full px-5 py-3 text-center font-medium text-jade bg-gray-100 hover:bg-gray-200 hover:text-deep-sea" role="menuitem">268 Log in269 </a>270 </div>271 <div :class="{'hidden': !data.userIsLoggedIn}" class="hidden" role="none">272 <span class="block w-full px-5 py-3 text-center">273 <span class="text-gray-400">274 Logged in as:275 </span>276 <br>277 <span class="font-medium text-gray-600" x-text="data.userEmailAddress">278 </span>279 </span>280 <a class="block w-full px-5 py-3 text-center font-medium text-jade bg-gray-100 hover:bg-gray-200 hover:text-deep-sea" role="menuitem">281 Licenses282 </a>283 <a class="border-t block w-full px-5 py-3 text-center font-medium text-jade bg-gray-100 hover:bg-gray-200 hover:text-deep-sea" role="menuitem">284 Purchases285 </a>286 <a class="border-t block w-full px-5 py-3 text-center font-medium text-jade bg-gray-100 hover:bg-gray-200 hover:text-deep-sea" role="menuitem">287 Profile288 </a>289 <a class="border-t block w-full px-5 py-3 text-center font-medium text-jade bg-gray-100 hover:bg-gray-200 hover:text-deep-sea" role="menuitem">290 Change Password291 </a>292 <a class="border-t block w-full px-5 py-3 text-center font-medium text-jade bg-gray-100 hover:bg-gray-200 hover:text-deep-sea" role="menuitem">293 Billing Portal294 </a>295 <a class="border-t block w-full px-5 py-3 text-center font-medium text-jade bg-gray-100 hover:bg-gray-200 hover:text-deep-sea" role="menuitem">296 Log Out297 </a>298 </div>299 </div>300 </div>301 </div>302 </div>303 </div>304 <div class="min-h-screen-minus-header-and-footer">305 <div class="bg-gray-50">306 <div class="relative pt-2 pb-10 sm:pb-14">307 <div class="mt-8 mx-auto max-w-4xl px-4 sm:mt-12 sm:px-6">308 <div class="text-center">309 <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">310 <span class="block">311 Ansel312 </span>313 <span class="block text-aqua-deep">314 for Craft CMS and ExpressionEngine315 </span>316 </h1>317 <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">318 Ansel puts the power of image manipulation in your hands. You can define constraints, widths, heights, aspect ratios, and more for each field so that anyone can edit images in entries with confidence all while using the manipulation tools to bring out the best in your site’s images!319 </p>320 <div class="mt-8 sm:flex justify-center">321 <div class="mb-2 mt-2 sm:mb-0 sm:mt-0 sm:ml-1 sm:mr-1">322 <a class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pumpkin-skin hover:bg-totem-pole shadow-md">323 Ansel for EE324 </a>325 </div>326 <div class="mb-2 mt-2 sm:mb-0 sm:mt-0 sm:ml-1 sm:mr-1">327 <a class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-pumpkin-skin hover:bg-totem-pole shadow-md">328 Ansel for Craft329 </a>330 </div>331 </div>332 </div>333 </div>334 </div>335 <div class="relative pb-16">336 <div aria-hidden="true" class="absolute inset-0 flex flex-col">337 <div class="flex-1">338 </div>339 <div class="flex-1 w-full bg-mine-shaft">340 </div>341 </div>342 <div class="max-w-7xl mx-auto px-4 sm:px-6">343 <picture>344 <img alt="Ansel Screenshot" class="relative rounded-lg shadow-lg" src="rick.jpg">345 </picture>346 </div>347 </div>348 </div>349 <div class="pt-16 bg-gray-100 pb-12 lg:pt-20 lg:pb-20">350 <div class="relative z-0">351 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">352 <div class="relative lg:grid lg:grid-cols-7">353 <div class="mx-auto max-w-md lg:mx-0 lg:max-w-none lg:col-start-1 lg:col-end-3 lg:row-start-2 lg:row-end-3">354 <div class="h-full flex flex-col rounded-lg shadow-lg overflow-hidden lg:rounded-none lg:rounded-l-lg">355 <div class="flex-1 flex flex-col">356 <div class="bg-white px-6 py-10">357 <div>358 <h3 class="text-center text-2xl font-medium text-gray-900" id="tier-hobby">359 Treasury360 </h3>361 <div class="mt-4 flex items-center justify-center">362 <span class="px-3 flex items-start text-6xl tracking-tight text-gray-900">363 <span class="mt-2 mr-2 text-4xl font-medium">364 $365 </span>366 <span class="font-extrabold">367 79368 </span>369 </span>370 </div>371 </div>372 </div>373 <div class="flex-1 flex flex-col justify-between border-t-2 border-gray-100 p-6 bg-gray-50 sm:p-10 lg:p-6 xl:p-10">374 <ul class="space-y-4">375 <li class="flex items-start">376 <div class="flex-shrink-0">377 </div>378 <p class="ml-3 text-base font-medium text-gray-500">379 Store files on S3 or any (S)FTP location380 </p>381 </li>382 <li class="flex items-start">383 <div class="flex-shrink-0">384 </div>385 <p class="ml-3 text-base font-medium text-gray-500">386 Simple, easy to use field type387 </p>388 </li>389 <li class="flex items-start">390 <div class="flex-shrink-0">391 </div>392 <p class="ml-3 text-base font-medium text-gray-500">393 Integration with Ansel394 </p>395 </li>396 </ul>397 <div class="mt-8">398 <div class="rounded-lg shadow-md">399 <a aria-describedby="tier-hobby" class="block w-full text-center rounded-lg border border-transparent bg-white px-6 py-3 text-base font-medium text-jade hover:bg-gray-100 hover:text-deep-sea">400 Treasury for EE401 </a>402 </div>403 </div>404 </div>405 </div>406 </div>407 </div>408 <div class="mt-10 max-w-lg mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-start-3 lg:col-end-6 lg:row-start-1 lg:row-end-4">409 <div class="relative z-10 rounded-lg shadow-xl">410 <div aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-lg border-2 border-deep-sea">411 </div>412 <div class="absolute inset-x-0 top-0 transform translate-y-px">413 <div class="flex justify-center transform -translate-y-1/2">414 <span class="inline-flex rounded-full bg-deep-sea px-4 py-1 text-sm font-semibold tracking-wider uppercase text-white">415 Flagship Add-on416 </span>417 </div>418 </div>419 <div class="bg-white rounded-t-lg px-6 pt-12 pb-10">420 <div>421 <h3 class="text-center text-3xl font-semibold text-gray-900 sm:-mx-6" id="tier-growth">422 Ansel423 </h3>424 <div class="mt-4 flex items-center justify-center">425 <span class="px-3 flex items-start text-6xl tracking-tight text-gray-900 sm:text-6xl">426 <span class="mt-2 mr-2 text-4xl font-medium">427 $428 </span>429 <span class="font-extrabold">430 79431 </span>432 </span>433 </div>434 </div>435 </div>436 <div class="border-t-2 border-gray-100 rounded-b-lg pt-10 pb-8 px-6 bg-gray-50 sm:px-10 sm:py-10">437 <ul class="space-y-4">438 <li class="flex items-start">439 <div class="flex-shrink-0">440 </div>441 <p class="ml-3 text-base font-medium text-gray-500">442 Drag and drop uploading443 </p>444 </li>445 <li class="flex items-start">446 <div class="flex-shrink-0">447 </div>448 <p class="ml-3 text-base font-medium text-gray-500">449 User-friendly, non-destructive image manipulation450 </p>451 </li>452 <li class="flex items-start">453 <div class="flex-shrink-0">454 </div>455 <p class="ml-3 text-base font-medium text-gray-500">456 Min and max image size constraints457 </p>458 </li>459 <li class="flex items-start">460 <div class="flex-shrink-0">461 </div>462 <p class="ml-3 text-base font-medium text-gray-500">463 Aspect ratio constraints464 </p>465 </li>466 </ul>467 <div class="mt-10 md:flex">468 <div class="rounded-lg shadow-md mb-2 md:mb-0 md:width-1/2--space-right">469 <a aria-describedby="tier-growth" class="block w-full text-center rounded-lg border border-transparent bg-deep-sea px-6 py-4 text-xl leading-6 font-medium text-white hover:bg-aqua-deep">470 Ansel for EE471 </a>472 </div>473 <div class="rounded-lg shadow-md md:width-1/2--space-left">474 <a aria-describedby="tier-growth" class="block w-full text-center rounded-lg border border-transparent bg-deep-sea px-6 py-4 text-xl leading-6 font-medium text-white hover:bg-aqua-deep">475 Ansel for Craft476 </a>477 </div>478 </div>479 </div>480 </div>481 </div>482 <div class="mt-10 mx-auto max-w-md lg:m-0 lg:max-w-none lg:col-start-6 lg:col-end-8 lg:row-start-2 lg:row-end-3">483 <div class="h-full flex flex-col rounded-lg shadow-lg overflow-hidden lg:rounded-none lg:rounded-r-lg">484 <div class="flex-1 flex flex-col">485 <div class="bg-white px-6 py-10">486 <div>487 <h3 class="text-center text-2xl font-medium text-gray-900" id="tier-scale">488 Construct489 </h3>490 <div class="mt-4 flex items-center justify-center">491 <span class="px-3 flex items-start text-6xl tracking-tight text-gray-900">492 <span class="mt-2 mr-2 text-4xl font-medium">493 $494 </span>495 <span class="font-extrabold">496 40497 </span>498 </span>499 </div>500 </div>501 </div>502 <div class="flex-1 flex flex-col justify-between border-t-2 border-gray-100 p-6 bg-gray-50 sm:p-10 lg:p-6 xl:p-10">503 <ul class="space-y-4">504 <li class="flex items-start">505 <div class="flex-shrink-0">506 </div>507 <p class="ml-3 text-base font-medium text-gray-500">508 Unlimited number of “trees” for menus and pages509 </p>510 </li>511 <li class="flex items-start">512 <div class="flex-shrink-0">513 </div>514 <p class="ml-3 text-base font-medium text-gray-500">515 Easy to use template tags516 </p>517 </li>518 <li class="flex items-start">519 <div class="flex-shrink-0">520 </div>521 <p class="ml-3 text-base font-medium text-gray-500">522 Easy custom configuration523 </p>524 </li>525 </ul>526 <div class="mt-8">527 <div class="rounded-lg shadow-md">528 <a aria-describedby="tier-hobby" class="block w-full text-center rounded-lg border border-transparent bg-white px-6 py-3 text-base font-medium text-jade hover:bg-gray-100 hover:text-deep-sea">529 Construct for EE530 </a>531 </div>532 </div>533 </div>534 </div>535 </div>536 </div>537 </div>538 </div>539 </div>540 </div>541 <div class="relative py-16 bg-white overflow-hidden">542 <div class="relative px-4 sm:px-6 lg:px-8">543 <div class="text-lg max-w-prose mx-auto">544 <h1>545 <span class="block text-base text-center text-aqua-deep font-semibold tracking-wide uppercase">546 About547 </span>548 <span class="mt-2 block text-3xl text-center leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">549 BuzzingPixel550 </span>551 </h1>552 <p class="mt-8 text-xl text-gray-500 leading-8">553 BuzzingPixel is me, TJ Draper. This is where you’ll find my work, add-ons, and more.554 </p>555 </div>556 <div class="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto">557 <figure>558 <img alt class="w-full rounded-lg" height="873" src="rick.jpg" width="1310">559 <figcaption>560 Rare photo of TJ captured in his unnatural habitat: the outdoors561 </figcaption>562 </figure>563 <p>564 I write HTML, CSS, JavaScript, PHP, and C# to make great software and great websites. I also create great content management experiences and write great add-ons for great CMSes.565 </p>566 <p>567 When I’m not developing software, I’m probably spending time with my 4 children and/or my beautiful wife, watching a movie or TV show, or podcasting.568 </p>569 </div>570 </div>571 </div>572 </div>573 <footer class="bg-nandor dark:bg-mine-shaft-dark relative z-40">574 <div class="max-w-screen-xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">575 <nav class="-mx-5 -my-2 flex flex-wrap justify-center">576 <div class="px-5 py-2">577 <a class="text-base leading-6 text-gray-200 hover:text-white">578 Cookie Policy579 </a>580 </div>581 <div class="px-5 py-2">582 <a class="text-base leading-6 text-gray-200 hover:text-white">583 Privacy Policy584 </a>585 </div>586 <div class="px-5 py-2">587 <a class="text-base leading-6 text-gray-200 hover:text-white">588 Terms of Service589 </a>590 </div>591 </nav>592 <div class="mt-8">593 <p class="text-center text-base leading-6 text-gray-400">594 © 2023 BuzzingPixel, LLC. All rights reserved.595 </p>596 </div>597 </div>598 </footer>599 </main>600 </body>601</html>602