JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="top"></div>
<div class="bottom">
  <div class="box">
    <div class="curve"></div>
  </div>
  <div class="center"></div>

</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  background: #999;
}

.bottom {
  display: flex;
}

.top {
  margin-left: 5.8em;
  background: white;
  height: 3.2em;
  width: 6.4em;
  border-top-right-radius: 3%;
  border-top-left-radius: 3%;
}

.center {
  height: 3.2em;
  background: white;
  width: 6em;
}

.box {
  width: 6em;
  height: 3.2em;
  overflow: visible;
  position: relative;
  background: red;
}

.box.right {
  transform: rotateY(180deg);
}

.curve {
  width: 12em;
  height: 6.4em;
  box-shadow: inset 1px 0 0 5px hotpink;
  background: #999;

  border-bottom-right-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}