JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="test">
      Hello World
    </div>
    <div id="sub-test">
      Test, this is only a test
    </div>
    <div id="inner">
    </div>
</div>

CSS

#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
  position: relative;
}

#inner
{
  height:200px;
  width:200px;
  position: absolute;
  top: -2%;
  left: -2%;
  z-index: 1;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:25%;
  border: 1px solid white;
}

#test {
  position: absolute;
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
  top: 30%;
  left: 15%;
  z-index: 2;
}

#sub-test {
  position: absolute;
  top: 45%;
  left: 15%;
  z-index: 2;
  color: blue;
  text-align: center;
  font-size: 30px;
}