JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red-line"></div>
<div class="strange-arc"></div>

CSS

body {
  background: red;
}

.red-line
{
    height:20px;
}
.strange-arc
{
   min-height: 30px;
   position: relative;
   margin: 0px 40px;
   overflow: hidden;
}

.strange-arc:before
{
    border: 10px solid lightgray;
    border-top-right-radius: 10px;
    bottom: 0;
    left: -38px;
    width: 28px;
} 

.strange-arc:after
{
    border: 10px solid lightgray;
    border-top-left-radius: 10px;
    bottom: 0;
    right: -38px;
    width: 28px;
}