JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='circle teal centered'>

</div><!--
--><div class='vertical-mid-hack'>

</div>

CSS

html,body {
  margin: 0;
  height: 100%;
  text-align: center;
}
.vertical-mid-hack {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.centered {
  display: inline-block;
  vertical-align: middle;
}
.circle {
  padding: 30px;
  border-radius: 100%;
}
.circle.teal {
  background-color: teal;
}