input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .glow-on-hover {
    @apply border-none outline-none cursor-pointer relative z-0 rounded-lg
    before:content-[''] before:absolute before:-top-0.5 before:-left-0.5 before:bg-[length:400%] before:-z-10
    before:blur-sm before:w-[calc(100%_+_4px)] before:h-[calc(100%_+_4px)] before:opacity-0 before:animate-rainbow before:transition-[opacity_0.3s_ease-in-out] before:rounded-xl
    before:hover:opacity-100
    after:-z-10 after:content-[''] after:absolute after:w-full after:h-full after:bg-white after:left-0 after:top-0 after:rounded-xl;
  }
}

.glow-on-hover:before {
  background-image: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
}

/*.glow-on-hover:active {*/
/*  @apply text-black;*/
/*}*/
/**/
/*.glow-on-hover:active:after {*/
/*  background: transparent;*/
/*}*/

/*.glow-on-hover:hover:before {*/
/*  opacity: 1;*/
/*}*/
/**/
/*.glow-on-hover:after {*/
/*  z-index: -1;*/
/*  content: "";*/
/*  position: absolute;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  background: #fff;*/
/*  left: 0;*/
/*  top: 0;*/
/*  border-radius: 10px;*/
/*}*/