JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="a">
    <p>
    Boks 1
    </p>
  </div>
  <div id="b">
    <p>
    Boks 2
    </p>
  </div>
  <div id="c">
    <p>
    Boks 3
    </p>
  </div>
  <div id="d">
    <p>
    Boks 4
    <span id="e">Boks</span>
    </p>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
#container {
  background: red;
  width: 20em;
  height: 20em;
  overflow: hidden;
}
p {
  padding-top: 1em;
}
#a,#b,#c,#d {
  height: 5em;
  text-align: center;
  margin: 0;
}
#a {
  background: white;
  border-radius: 2em 2em 0 0;
}
#b {
  background: blue;
  border-radius: 2em 2em 0 0;
}
#c {
  background: green;
  width: 30em;
  border-radius: 2em 2em 0 0;
}
#d {
  background: black;
  color: white;
  border-radius: 2em 2em 0 0;
}
#e {
  background: black;
  color: white;
  float: right;
  height: 5em;
  margin-top: -1em;
}