Animated Background Shapes

The basic idea is use rounded divs as blobs. They all absolute positioned in their parent's div. Note mix-blend-multiply, filter blur-xl opacity-70 and animation-blob combined here to give them nature and blurry effect.

mix-blend-multiply controls how elements' content should be blended with the background.

    <div className="bg-gray-50 min-h-96 flex items-center justify-center px-16">
      <div className="relative w-full max-w-lg">
        <div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
        <div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob [animate-delay:2s]"></div>
        <div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob [animate-delay:4s]"></div>
        <div className="m-8 relative space-y-4">
          <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
            <div className="flex-1">
              <div className="h-4 w-48 bg-gray-300 rounded"></div>
            </div>
            <div>
              <div className="w-24 h-6 rounded-lg bg-purple-300"></div>
            </div>
          </div>
          <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
            <div className="flex-1">
              <div className="h-4 w-56 bg-gray-300 rounded"></div>
            </div>
            <div>
              <div className="w-20 h-6 rounded-lg bg-yellow-300"></div>
            </div>
          </div>
          <div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
            <div className="flex-1">
              <div className="h-4 w-44 bg-gray-300 rounded"></div>
            </div>
            <div>
              <div className="w-28 h-6 rounded-lg bg-pink-300"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

We need to add blob animation to taiwind config file:

// tailwind.config.js 
module.exports = {
  theme: {
    extend: {
      animation: { blob: "blob 7s infinite", },
      keyframes: {
        blob: {
          "0%": { transform: "translate(0px, 0px) scale(1)", },
          "33%": { transform: "translate(30px, -50px) scale(1.1)", },
          "66%": { transform: "translate(-20px, 20px) scale(0.9)", },
          "100%": { transform: "tranlate(0px, 0px) scale(1)", },
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};