JSFiddle - React, Tailwind, and code Playground

by Sanan Yuzb

HTML

<div class="square">
       <span>Привет</span>
     </div>

CSS

body {
    background: #2C3E50;
}

.square {
  background-color: rgb(231, 76, 60);
  position: absolute;
  left: 92px;
  top: 113px;
  width: 100px;
  height: 125px;
  z-index: 1;
   -webkit-transition: 0.8s 0.1s ease ;
  -o-transition: 0.8s 0.1s ease ;
  -moz-transition: 0.8s 0.1s ease ; 
  cursor: pointer;
  opacity: 0.9;
}
span {
  position: absolute;
  font-family: Verdana;
  left: 20%;
  top : 13px;
  width: 100px;
  height: 125px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: 0.8s 0.1s ease ;
  -o-transition: 0.8s 0.1s ease ;
  -moz-transition: 0.8s 0.1s ease ;
}

.square:hover {
    top: 60px;
}

.square:hover span {
    opacity:1;
}