SOURCE

console.clear()

<div class="wrapper w-full h-full relative overflow-hidden">
    <div class="bg-effect w-fit h-fit absolute bottom-20 right-20 filter">
        <span class="origin-center px-60 py-40 opacity-40 absolute right-0 bottom-0 bg-cyan-400 rounded-full"></span>
        <span class="origin-right mr-40 px-40 py-20 opacity-40 absolute right-0 bottom-0 bg-pink-400 rounded-full"></span>
        <span class="origin-center px-20 py-40 opacity-40 absolute right-0 bottom-0 bg-indigo-400 rounded-full"></span>
    </div>
</div>

<script type="tailwind-config">
{
    theme: {
        extend: {
            colors:{
                cyan:   colors.cyan,
                sky:    colors.sky,
                amber:  colors.amber,
                pink:   colors.pink,
                orange: colors.orange,
                test:   '#0cf'
            }
        }
    }
}
</script>

html, body {
    height: 100%;
    background: #fff;
}

.bg-effect {
    filter: blur(80px);
    transform: scale(1.3) translateZ(0);
}

.bg-effect span:nth-child(1) {
    animation: 3s rotate linear infinite;
}

.bg-effect span:nth-child(2) {
    animation: 5s rotate linear infinite;
}

.bg-effect span:nth-child(3) {
    animation: 7s rotate linear infinite;
}

@keyframes rotate {
    0% { transform: translateX(0) rotate(0deg) }
    50% { transform: translateX(60px) rotate(180deg) }
    100% { transform: translateX(0px) rotate(360deg) }
}