tailwind Blurry gradient animated

index.html

<div class="flex items-center justify-center min-h-screen bg-gray-50">
  <div class="relative w-full max-w-lg">
    <div
      class="absolute rounded-full animate-blob mix-blend-multiply filter blur-2xl opacity-70 -top-5 -right-2 w-72 h-72 bg-yellow-500"
    />
    <div
      class="absolute rounded-full animate-blob animation-delay-2000 mix-blend-multiply filter blur-2xl opacity-70 top-0 -left-2 w-72 h-72 bg-indigo-500"
    />
    <div
      class="absolute rounded-full animate-blob  mix-blend-multiply filter blur-2xl opacity-70 -bottom-20 left-20 w-72 h-72 bg-pink-500"
    />

    <!-- INSERT CONTENT -->
    <div class="m-8 relative space-y-4">

      <div
        class="p-5 bg-white rounded-lg flex items-center justify-between space-x-8"
      >
        <div class="flex-1">
          <div class="h-4 w-48 bg-gray-300 rounded" />
          <div>
            <div class="w-24 h-6 rounded-lg bg-purple-300" />
          </div>
        </div>
      </div>

      <div
        class="p-5 bg-white rounded-lg flex items-center justify-between space-x-8"
      >
        <div class="flex-1">
          <div class="h-4 w-48 bg-gray-300 rounded" />
          <div>
            <div class="w-24 h-6 rounded-lg bg-purple-300" />
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')


module.exports = {
    mode: 'jit',
    // you dont need `purge: enabled: production` because you are using jit
    purge: [
        "./src/**/*.svelte",
        // may also want to include HTML files
        "./src/**/*.html"
    ],
    darkMode: 'class',
    theme: {
        extend: {
            fontFamily: {
                sans: ['Raleway', ...defaultTheme.fontFamily.sans],
            },
            'animation': {
                'gradient-x': 'gradient-x 15s ease infinite',
                'gradient-y': 'gradient-y 15s ease infinite',
                'gradient-xy': 'gradient-xy 15s ease infinite',
            },
            'keyframes': {
                'gradient-y': {
                    '0%, 100%': {
                        'background-size': '400% 400%',
                        'background-position': 'center top'
                    },
                    '50%': {
                        'background-size': '200% 200%',
                        'background-position': 'center center'
                    }
                },
                'gradient-x': {
                    '0%, 100%': {
                        'background-size': '200% 200%',
                        'background-position': 'left center'
                    },
                    '50%': {
                        'background-size': '200% 200%',
                        'background-position': 'right center'
                    }
                },
                'gradient-xy': {
                    '0%, 100%': {
                        'background-size': '400% 400%',
                        'background-position': 'left center'
                    },
                    '50%': {
                        'background-size': '200% 200%',
                        'background-position': 'right center'
                    }
                }
            },
            colors: {
                'indian-orange': '#ff8000',
                green: {
                    650: '#008000',
                }
            },
            animation: {
                blob: 'blob 7s infinite'
            },
            keyframes: {
                blob: {
                    '0%': {
                        transform: 'translate(0px, 0px) scale(1)'
                    },
                    '33%': {
                        transform: 'translate(50px, -30px) scale(1.1)'
                    },
                    '66%': {
                        transform: 'translate(-20px, 20px) scale(0.9)'
                    },
                    '100%': {
                        transform: 'translate(0px, 0px) scale(1)'
                    }
                }
            }
        },
    },
    variants: {},
    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio'),],
}