JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<div class="va ht1">
    <span class="click">
    CLICK ME
    </span>
</div>

<div class="va ht2">
    <span class="click">
    CLICK ME
    </span>
</div>

<div class="va ht3">
    <span class="click">
    CLICK ME
    </span>
</div>

CSS

.va{
    border:1px solid #000;
    text-align:center;
    width:30%;
    margin:1%;
    float:left;
}
.ht1{    height:100px;}
.ht2{    height:200px;}
.ht3{    height:300px;}

.va .click{
  position: relative;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  border:1px solid #ccc;
    padding:10%;
}