JSFiddle - React, Tailwind, and code Playground
CSS
div {
width: 180px;
border-radius: 30px;
padding: 20px;
line-height: 10px;
font-size: 16px;
color: #FFF;
position: relative;
overflow: hidden;
}
div:before, div:after {
content:"";
position: absolute;
left: 18px;
width: 180px;
height: 20px;
border-radius: 50%;
z-index: -1;
}
div:before {
top: -15px;
box-shadow: 0 -9970px 0 10000px black;
}
div:after {
bottom: -15px;
box-shadow: 0 9970px 0 10000px black;
}
body {
background-color: cornflowerblue;
}