JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>
  This should be here
  </p>
</div>
<div class="overlay">
  <div class="transparent-circle">
  </div>
</div>

CSS

p {
  margin-top: 200px;
  text-align: center;
}
.overlay {
  background: rgba(0,0,0,0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.transparent-circle {
  position: absolute;
  top: 160px;
  left: 50%;
  height: 100px;
  width: 100px;
  background: rgba(0,0,0,1.0);
  z-index: 2;
  border-radius: 100%;
}