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