JSFiddle - React, Tailwind, and code Playground

HTML

<p>Круги должны быть одинаковыми</p>

<div></div>

<svg width="150" height="150">
    <filter id="blur" x="-100%" y="-100%" width="300%" height="300%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
    </filter>

    <rect x="50" y="50" width="50" height="50" filter="url(#blur)" />
</svg>

CSS

div {
    box-shadow: 100px 0 40px black;
    display: inline-block;
    height: 50px;
    margin: 50px 150px 50px -50px;
    width: 50px;
}