Animated Border Gradient

1. Create the boilerplate for the Button

<div class="flex h-40 w-full flex-row items-center justify-center">
  <button class="inline-block rounded-md bg-white bg-gradient-to-r from-red-500 via-purple-500 to-blue-500 bg-[length:400%_400%] p-1">
    <span class="block rounded-md bg-slate-900 px-5 py-3 font-bold text-white"> algochurn.com </span>
  </button>
</div>

2. Add the required border animation in tailwind.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        border: 'border 4s ease infinite',
      },
      keyframes: {
        border: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        },
      },
    },
  },
  plugins: [],
}

3. Add animate-border class to the Button.

<div class="flex h-40 w-full flex-row items-center justify-center">
  <button class="animate-border inline-block rounded-md bg-white bg-gradient-to-r from-red-500 via-purple-500 to-blue-500 bg-[length:400%_400%] p-1">
    <span class="block rounded-md bg-slate-900 px-5 py-3 font-bold text-white"> algochurn.com </span>
  </button>
</div>

4. Demo