JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <p>Blabla</p>
    <svg width="100" height="100">
        <circle id='c1' cx='10' cy='-10' r='5' onclick='alert("click");'></circle>
        <circle id='c2' cx='10' cy='10' r='5' onclick='alert("click");'></circle>
    </svg>
</body>

CSS

circle {
    fill: black;
}

svg {
    overflow: visible;
}

circle:hover {
    fill: red;
}