JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bubbly-bg.js"></script>
<p>foo bar</p>

CSS

body{width:100%;}
p{padding:20px;font-size:20px;}

JavaScript

bubbly({
    animate: true, // default is true
    blur: 4, // default is 4
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
    bubbles: 50, // default is Math.floor((canvas.width + canvas.height) * 0.02);
    canvas: document.querySelector("#background"), // default is created and attached
    colorStart: "#e6efd8", // default is blue-ish
    colorStop: "#86af49",// default is blue-ish
    compose: "lighter", // default is "lighter"
    shadowColor: "#fff", // default is #fff
});