JSFiddle - React, Tailwind, and code Playground

HTML

<div class=block>
<div class=block1>
block1
<div class=block2>
block2
</div>
</div>
</div>

CSS

.block{
  display: block;
  border: 1px solid red;
  width: 50%;
  margin: 2rem 0;
}

.block1{
  display: block;
  border: 3px solid green;
  width: 80%;
  margin: 1rem 0;
  padding: 2rem 0;
  text-align: center;
}

.block2{
  display: block;
  position: relative;
  align-items: center;
  border: 1px solid blue;
  background-color: blue;
  color: white;
  width: 50%;
  top: -3.7rem;
  left: 5rem;
  text-align: center;
}