JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="header">Header</div>
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, nemo.
  </div>
</div>

CSS

.container {
  position: relative;
  text-align: center;
  width: 80%;
  padding: 40px;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 40px;
  border: 1px solid #000;
}

.container .header {
  position: absolute;
  text-align: center;
  padding: 20px 40px;
  background-color: #fff;
  margin: 0 auto;
  left: 50%;
  top: 0;
  transform: translateX(-50%) translateY(-50%);
}