Praashoo7's hover button

About Praashoo7's hover button

Praashoo7's hover button is an animated Tailwind CSS v4 button by Praashoo7. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories

Hover effects, Icon, Animated

Using this example

Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

<div class="flex items-center justify-center rounded-[25px] pointer-events-none w-[20.5em] h-[17em] bg-[#87ceeb] hover:bg-[#171717] active:bg-black transition duration-500 ease-in-out overflow-hidden">
  <div class="group">
    <button class="relative z-[2] cursor-pointer top-[11.75em] left-[7em] pointer-events-auto w-[6em] h-[6em] rounded-full bg-gradient-to-br from-yellow-400 via-yellow-400 to-orange-500 hover:from-gray-400 hover:to-slate-200 transition duration-500 ease-in-out shadow-[0px_0px_100px_rgba(255,212,59,0.5),0px_0px_100px_rgba(255,102,0,0.5)] hover:shadow-[0px_0px_100px_rgba(233,233,233,0.5),0px_0px_100px_rgba(192,192,192,0.5);] hover:opacity-100 active:shadow-none">
      <div class="relative opacity-0 left-[65%] top-[25%] w-[1.1em] h-[1.1em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"></div>
      <div class="relative opacity-0 left-[80%] top-[25%] w-[.45em] h-[.45em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"></div>
      <div class="relative opacity-0 left-[65%] top-[20%] w-[.8em] h-[.8em] rounded-full bg-[#a6a6a6] shadow-[inset_-3px_1px_1px_#7b7b7b,inset_0px_-1px_1px_#d1d1d1] transition duration-500 ease-in-out group-hover:opacity-100"></div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg4770" viewBox="0 0 500.00001 500.00001" height="141.11111mm" width="141.11111mm" class="relative w-[6em] h-[6em] bottom-[39%] opacity-0 shadow-none transition duration-500 ease-in-out group-active:opacity-100">
        <defs id="defs4772"></defs>
        <metadata id="metadata4775">image/svg+xml</metadata>
        <g transform="translate(92.857148,-1130.9336)" id="layer1">
          <g id="g5318" transform="translate(264.28569,744.28568)">
            <ellipse id="circle4657" cy="636.64795" cx="-107.1429" style="fill:#178181;fill-opacity:1" rx="249.99994" ry="250"></ellipse>
            <path id="path4659" d="m 142.85704,636.64796 c 0,-50.15918 -14.76953,-96.86621 -40.20019,-136.01074 0,0 -14.261714,20.83398 -11.582027,34.22558 2.677734,13.39356 18.413077,14.41602 16.796867,24.24024 -1.61621,9.82422 -13.223625,-2.81153 -27.511708,23.0791 -14.287106,25.89258 -7.140623,61.61719 13.392575,64.29102 20.534173,2.67187 49.104483,-9.8252 49.104483,-9.8252 z" style="fill:#2aa846;fill-opacity:1"></path>
            <path id="path4661" d="m -41.488621,395.3589 c 29.098626,7.89843 56.087877,20.92187 79.938457,38.03808 0,0 -28.9882739,-4.78125 -39.9697165,5.03711 -10.9804665,9.82129 -26.9951105,33.03907 -39.9697165,0 -12.972653,-33.03711 9.76e-4,-43.07519 9.76e-4,-43.07519 z" style="fill:#2aa846;fill-opacity:1"></path>
            <path id="path4663" d="m -295.11258,471.82276 c 45.81835,-52.21191 113.04294,-85.1748 187.96968,-85.1748 0,0 -16.96093,10.26953 15.181635,27.67969 32.143547,17.41211 17.410152,25.44629 10.713865,30.80371 -6.695311,5.35742 -18.309566,-10.71387 -25.8955,-21.42676 -7.58691,-10.71582 -40.16796,-27.23144 -65.16991,-18.30078 -25.00097,8.93066 -46.42479,15.52734 -42.85643,23.83594 3.56738,8.30664 46.42479,-7.75879 62.49608,-6.87012 16.07128,0.89062 10.71386,10.70996 -4.46192,22.31836 -15.17773,11.6084 -16.96679,25.89258 -0.89453,34.82031 16.07031,8.93164 35.70898,9.8252 40.1787,4.46875 4.4668,-5.35742 -8.03613,-40.17871 22.322264,-25.00195 30.35839,15.17676 55.359361,24.1123 30.35839,46.43066 -25.001946,22.31641 -53.571274,47.3252 -54.465804,61.60547 -0.89453,14.28223 8.93164,25.89844 3.57422,26.78711 -5.35743,0.88867 -10.27442,-5.80176 -13.84375,-10.71582 -3.56738,-4.91113 -20.08886,-6.69434 -28.12402,-3.57227 -8.03613,3.12207 -23.21679,15.17676 -14.73242,26.78516 8.48535,11.61035 20.08301,6.24609 31.69336,11.60449 11.60839,5.35742 22.43358,25.74707 20.21093,30.35547 -2.22266,4.60645 -12.11816,-1.22656 -20.21093,-16.96191 -8.09473,-15.73731 -23.27637,-5.35742 -33.958,-8.03614 -10.68262,-2.67773 -18.71875,-4.46289 -29.43359,-23.21386 -10.71484,-18.74903 -32.89745,-23.9961 -41.9619,-34.82031 -25.96582,-31.00586 -24.1084,-54.46387 -29.46484,-65.17774 -5.35742,-10.7168 -19.22558,-28.22266 -19.22558,-28.22266 z" style="fill:#2aa846;fill-opacity:1"></path>
            <path id="path4665" d="m -83.036462,640.22023 c 0,0 26.786126,2.67382 40.178701,14.28418 13.392575,11.60839 15.181637,16.07519 35.7158115,20.53808 20.5341745,4.46094 29.4648365,16.06543 16.0712852,38.38965 -13.3925749,22.32129 -37.5038967,58.03711 -49.1083867,68.75195 -11.603512,10.71582 -25.890618,19.64356 -31.248039,37.5 -5.356444,17.85449 -7.145506,28.5625 4.46289,35.71094 0,0 -6.246093,15.18066 -20.533198,-4.46289 -14.288082,-19.64551 -2.679687,-42.85645 0,-56.25 2.677733,-13.3916 9.819333,-53.56641 5.355467,-63.39258 -4.460936,-9.82324 -25.000969,-16.07519 -30.358389,-36.60742 -5.35742,-20.5332 4.01855,-60.49219 29.463858,-54.46191 z" style="fill:#2aa846;fill-opacity:1"></path>
            <path id="path4667" d="m -283.92019,459.87256 c 97.63181,-97.63379 255.919848,-97.63184 353.552638,0 97.632792,97.62988 97.632792,255.91992 9.7e-4,353.55175 0,0 113.425772,-149.99023 -47.16111,-310.57714 C -138.11554,342.25927 -283.92019,459.87256 -283.92019,459.87256 Z" style="opacity:0.36700056;fill:#414141;fill-opacity:1;enable-background:new"></path>
          </g>
        </g>
      </svg>
    </button>
    <div class="relative blur-[0.5px] opacity-80 top-[2.4em] left-[-1em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"></div>
    <div class="relative blur-[0.5px] opacity-80 opacity-100 top-[6em] left-[13em] bg-[#f5f5f5] w-[50px] h-[50px] rounded-full shadow-[#f5f5f5_65px_-15px_0_-5px,#f5f5f5_25px_-25px,#f5f5f5_30px_10px,#f5f5f5_60px_15px_0_-10px,#f5f5f5_85px_5px_0_-5px] group-hover:opacity-0 group-active:opacity-0 transition duration-500 ease-in-out"></div>
    <div class="relative bottom-[6em] left-[0.15em] w-[20em] h-[17em] transition duration-500 ease-in-out opacity-0 group-hover:opacity-100 scale-[1.2] group-active:scale-[1.01]">
      <div class="animate-pulse w-[2px] h-[2px] bg-white rounded-full shadow-[220px_118px_#fff,280px_176px_#fff,40px_50px_#fff,60px_180px_#fff,200px_250px_#fff]"></div>
      <div class="animate-[pulse_1s_infinite_100ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_170px_#fff,_180px_176px_#fff,_140px_45px_#fff,_10px_230px_#fff,_70px_120px_#fff,_170px_10px_#fff,_70px_70px_#fff]"></div>
      <div class="animate-[pulse_1s_infinite_200ms] w-[2px] h-[2px] bg-white rounded-full shadow-[20px_130px_#fff,_300px_130px_#fff,_80px_20px_#fff,_190px_50px_#fff,_270px_20px_#fff,_240px_70px_#fff,_170px_210px_#fff]"></div>
      <div class="animate-[pulse_1s_infinite_300ms] w-[2px] h-[2px] bg-white rounded-full shadow-[120px_230px_#fff,_110px_80px_#fff,_280px_80px_#fff,_280px_230px_#fff,_220px_190px_#fff,_100px_200px_#fff,_250px_150px_#fff]"></div>
    </div>
  </div>
</div>

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-black: #000;
    --color-white: #fff;
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-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: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .relative {
    position: relative;
  }
  .top-\[2\.4em\] {
    top: 2.4em;
  }
  .top-\[6em\] {
    top: 6em;
  }
  .top-\[11\.75em\] {
    top: 11.75em;
  }
  .top-\[20\%\] {
    top: 20%;
  }
  .top-\[25\%\] {
    top: 25%;
  }
  .bottom-\[6em\] {
    bottom: 6em;
  }
  .bottom-\[39\%\] {
    bottom: 39%;
  }
  .left-\[-1em\] {
    left: -1em;
  }
  .left-\[0\.15em\] {
    left: 0.15em;
  }
  .left-\[7em\] {
    left: 7em;
  }
  .left-\[13em\] {
    left: 13em;
  }
  .left-\[65\%\] {
    left: 65%;
  }
  .left-\[80\%\] {
    left: 80%;
  }
  .z-\[2\] {
    z-index: 2;
  }
  .flex {
    display: flex;
  }
  .h-\[\.8em\] {
    height: .8em;
  }
  .h-\[\.45em\] {
    height: .45em;
  }
  .h-\[1\.1em\] {
    height: 1.1em;
  }
  .h-\[2px\] {
    height: 2px;
  }
  .h-\[6em\] {
    height: 6em;
  }
  .h-\[17em\] {
    height: 17em;
  }
  .h-\[50px\] {
    height: 50px;
  }
  .w-\[\.8em\] {
    width: .8em;
  }
  .w-\[\.45em\] {
    width: .45em;
  }
  .w-\[1\.1em\] {
    width: 1.1em;
  }
  .w-\[2px\] {
    width: 2px;
  }
  .w-\[6em\] {
    width: 6em;
  }
  .w-\[20\.5em\] {
    width: 20.5em;
  }
  .w-\[20em\] {
    width: 20em;
  }
  .w-\[50px\] {
    width: 50px;
  }
  .scale-\[1\.2\] {
    scale: 1.2;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-\[pulse_1s_infinite_100ms\] {
    animation: pulse 1s infinite 100ms;
  }
  .animate-\[pulse_1s_infinite_200ms\] {
    animation: pulse 1s infinite 200ms;
  }
  .animate-\[pulse_1s_infinite_300ms\] {
    animation: pulse 1s infinite 300ms;
  }
  .animate-pulse {
    animation: var(--animate-pulse);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .items-center {
    align-items: center;
  }
  .justify-center {
    justify-content: center;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .rounded-\[25px\] {
    border-radius: 25px;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .bg-\[\#87ceeb\] {
    background-color: #87ceeb;
  }
  .bg-\[\#a6a6a6\] {
    background-color: #a6a6a6;
  }
  .bg-\[\#f5f5f5\] {
    background-color: #f5f5f5;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-yellow-400 {
    --tw-gradient-from: var(--color-yellow-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-yellow-400 {
    --tw-gradient-via: var(--color-yellow-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-orange-500 {
    --tw-gradient-to: var(--color-orange-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow-\[0px_0px_100px_rgba\(255\,212\,59\,0\.5\)\,0px_0px_100px_rgba\(255\,102\,0\,0\.5\)\] {
    --tw-shadow: 0px 0px 100px var(--tw-shadow-color, rgba(255,212,59,0.5)), 0px 0px 100px var(--tw-shadow-color, rgba(255,102,0,0.5));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[20px_130px_\#fff\,_300px_130px_\#fff\,_80px_20px_\#fff\,_190px_50px_\#fff\,_270px_20px_\#fff\,_240px_70px_\#fff\,_170px_210px_\#fff\] {
    --tw-shadow: 20px 130px var(--tw-shadow-color, #fff), 300px 130px var(--tw-shadow-color, #fff), 80px 20px var(--tw-shadow-color, #fff), 190px 50px var(--tw-shadow-color, #fff), 270px 20px var(--tw-shadow-color, #fff), 240px 70px var(--tw-shadow-color, #fff), 170px 210px var(--tw-shadow-color, #fff);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[120px_170px_\#fff\,_180px_176px_\#fff\,_140px_45px_\#fff\,_10px_230px_\#fff\,_70px_120px_\#fff\,_170px_10px_\#fff\,_70px_70px_\#fff\] {
    --tw-shadow: 120px 170px var(--tw-shadow-color, #fff), 180px 176px var(--tw-shadow-color, #fff), 140px 45px var(--tw-shadow-color, #fff), 10px 230px var(--tw-shadow-color, #fff), 70px 120px var(--tw-shadow-color, #fff), 170px 10px var(--tw-shadow-color, #fff), 70px 70px var(--tw-shadow-color, #fff);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[120px_230px_\#fff\,_110px_80px_\#fff\,_280px_80px_\#fff\,_280px_230px_\#fff\,_220px_190px_\#fff\,_100px_200px_\#fff\,_250px_150px_\#fff\] {
    --tw-shadow: 120px 230px var(--tw-shadow-color, #fff), 110px 80px var(--tw-shadow-color, #fff), 280px 80px var(--tw-shadow-color, #fff), 280px 230px var(--tw-shadow-color, #fff), 220px 190px var(--tw-shadow-color, #fff), 100px 200px var(--tw-shadow-color, #fff), 250px 150px var(--tw-shadow-color, #fff);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[220px_118px_\#fff\,280px_176px_\#fff\,40px_50px_\#fff\,60px_180px_\#fff\,200px_250px_\#fff\] {
    --tw-shadow: 220px 118px var(--tw-shadow-color, #fff), 280px 176px var(--tw-shadow-color, #fff), 40px 50px var(--tw-shadow-color, #fff), 60px 180px var(--tw-shadow-color, #fff), 200px 250px var(--tw-shadow-color, #fff);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[inset_-3px_1px_1px_\#7b7b7b\,inset_0px_-1px_1px_\#d1d1d1\] {
    --tw-shadow: inset -3px 1px 1px var(--tw-shadow-color, #7b7b7b), inset 0px -1px 1px var(--tw-shadow-color, #d1d1d1);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[\#f5f5f5_65px_-15px_0_-5px\,\#f5f5f5_25px_-25px\,\#f5f5f5_30px_10px\,\#f5f5f5_60px_15px_0_-10px\,\#f5f5f5_85px_5px_0_-5px\] {
    --tw-shadow-color: #f5f5f5;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, #f5f5f5 65px -15px 0 -5px,#f5f5f5 25px -25px,#f5f5f5 30px 10px,#f5f5f5 60px 15px 0 -10px,#f5f5f5 85px 5px 0 -5px var(--tw-shadow-alpha), transparent);
    }
  }
  .blur-\[0\.5px\] {
    --tw-blur: blur(0.5px);
    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,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  @media (hover: hover) {
    .group-hover\:opacity-0:is(:where(.group):hover *) {
      opacity: 0%;
    }
    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 100%;
    }
  }
  .group-active\:scale-\[1\.01\]:is(:where(.group):active *) {
    scale: 1.01;
  }
  .group-active\:opacity-0:is(:where(.group):active *) {
    opacity: 0%;
  }
  .group-active\:opacity-100:is(:where(.group):active *) {
    opacity: 100%;
  }
  @media (hover: hover) {
    .hover\:bg-\[\#171717\]:hover {
      background-color: #171717;
    }
    .hover\:from-gray-400:hover {
      --tw-gradient-from: var(--color-gray-400);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .hover\:to-slate-200:hover {
      --tw-gradient-to: var(--color-slate-200);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
    .hover\:opacity-100:hover {
      opacity: 100%;
    }
  }
  .active\:bg-black:active {
    background-color: var(--color-black);
  }
  .active\:shadow-none:active {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}