JSFiddle - React, Tailwind, and code Playground

by Daniel

HTML

<div class="w">
  <div class="t1">5vh</div>
  <div class="t2">5vw</div>
  <div class="t3">5vmin</div>
  <div class="t4">5vmax</div>  
</div>

CSS

.w{
  display: flex;
  flex-flow: row wrap;
  
  width: 80vw;
  height: 80vh;
  
  margin: 0 auto;
}

.t1, .t2, .t3, .t4{
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 50%;
  height: 50%;
  outline: 1px solid lightgray;
}

.t1{
  font-size: 5vh;
}

.t2{
  font-size: 5vw;
}

.t3{
  font-size: 5vmin;
}

.t4{
  font-size: 5vmax;
}