JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<div class="wrapper">
  <div class="circle-line text-center">
    <div class="block-of-text vertical-center">
        <span class="heading-2">Hammock</span>
     </div>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,100);

body {
  font-family: Roboto, sans-serif;
  background: #2C3D51;
  color: #fff;
  padding: 1em;
  -webkit-font-smoothing: antialiased;
}

.block-of-text {
  
}

.circle-line {
  border: 1px solid #000;
  height: 400px;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.heading-2 {
  font-size: 35px;
  font-weight: 600;
}

.text-center {
  text-align: center;
}

.vertical-center {
  position: relative;
  top: 50%; 
  transform: translateY(50%);
  -webkit-transform: translateY(50%);
}