JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">раз</div>

CSS

body{
position:relative;
overflow:hidden;
}


.wrap{
width:400px;
height:50px;
margin:50px auto;
position:relative;
background:red;
}


.wrap:before{
content:"";
position:absolute;
top:-2950px;
left:-1305px;
width:3000px;
height:3000px;
border-radius:3000px;
background:#fff;
z-index:-1;
-webkit-box-shadow:320px 0px 15px 5px #fff, -320px 0px 15px 5px #fff, 0px 5px 1px 5px #eceaea;
-moz-box-shadow:320px 0px 15px 5px #fff, -320px 0px 15px 5px #fff, 0px 5px 1px 5px #eceaea; 
box-shadow:320px 0px 15px 5px #fff, -320px 0px 15px 5px #fff, 0px 5px 1px 5px #eceaea;    
}


.wrap:after{
content:"";
position:absolute;
top:-943px;
left:-307px;
width:1000px;
height:1000px;
border-radius:1000px;
background:#fff;
z-index:-1;
-webkit-box-shadow:320px 0px 15px 5px #fff, -320px 0px 15px 5px #fff, 0px 5px 5px 0px #fff;
-moz-box-shadow:320px 0px 15px 5px #fff, -320px 0px 15px 5px #fff, 0px 5px 5px 0px #fff;
box-shadow:320px 0px 15px 5px #fff, -320px 0px 15px 5px #fff, 0px 5px 5px 0px #fff;    
opacity:0.5;
}