JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="top" xmlns="http://www.w3.org/2000/svg" >
    <circle cx="10" cy="25" r="30" fill="rgba(255,130,150,1.0)" />
    <circle cx="45" cy="40" r="40" fill="rgba(20,255,150,1.0)" />
    <circle cx="70" cy="50" r="40" fill="rgba(20,130,255,1)" />
    <circle cx="100" cy="10" r="40" fill="rgba(20,130,150,1)" />
</svg>

CSS

.top {
    position: fixed;
    z-index:10;
    pointer-events:none;
}