JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="double-wrapper">
    <div class="left"></div>
<div class="container">content</div>            
    </div>

</div>

CSS

html,body{
    height:100%;
    margin:0;
    padding:0;
    background: blue;
    background-size:cover;
}
.wrapper {
    min-height: 100px;
    padding: 50px;
}
.container {
    background:none;
    padding: 50px;
    height:50%;
    position:relative;
    overflow:hidden;
    z-index:1;
}
.container:after {
    content:'';
    position:absolute;
    left:-600%;
    width:1300%;
    padding-top:1300%;
    bottom:80%;
    background:none;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px teal;
    z-index:-1;
}
.left {
    border: 1px solid red;
    pos
}