Fancy Glowing Button - Tailwind

index.html

<div class="flex h-screen flex-col items-center justify-center bg-[#141516] relative z-10">
  <button class="text-white border-2 relative text=[#F3F3F3] font-grot py-2 px-3 rounded-lg flex justify-center cursor-pointer bg-origin-border bg-clip-padding bg-[length:200%] before:content-[''] before:h-[30%] before:w-[60%] before:absolute before:bottom-[-20%] before:bg-[length:200%] bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,#FF6D1B,#FFEE55,#5BFF89,#4D8AFF,#6B5FFF,#FF64F9,#FF6565)] before:bg-[linear-gradient(90deg,#FF6D1B,#FFEE55,#5BFF89,#4D8AFF,#6B5FFF,#FF64F9,#FF6565)] before:blur-lg animate-razor before:animate-razor hover:animate-razor2 hover:before:animate-razor2 border-transparent before:-z-10" style="background-clip: padding-box, border-box, border-box;">
    Get Started
  </button>
</div>

styles.css

@import url('https://fonts.googleapis.com/css?family=Space%20Grotesk:700|Space%20Grotesk:400');
@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      fontFamily: {
        grot: ['Space Grotesk'],
      },
      keyframes: {
        razor: {
          '0%': { 'background-position': '0' },
          '100%': { 'background-position': '200%' },
        },
      },
      animation: {
        razor: 'razor 2s infinite linear',
        razor2: 'razor 0.5s infinite linear',
      },
    },
  },
  plugins: [],
}

https://play.tailwindcss.com/Qwa80Afdw5?layout=preview

Based on: https://codepen.io/Juxtopposed/pen/JjVXRey