JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hi</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="square"></div>
    <div class="text1">Привет!</div>
</body>
</html>

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;
}

.square:hover {
    top: 60px;
    opacity: 1;
}

.text1 {
  position: absolute;
  font-family: Verdana;
  left: 108px;
  top : 120px;
  width: 100px;
  height: 125px;
  z-index: 2;
  opacity: 0;
  -webkit-transition: 0.8s 0.1s ease ;
  -o-transition: 0.8s 0.1s ease ;
  -moz-transition: 0.8s 0.1s ease ;
}

.text1:hover {
    top: 60px;
    opacity: 1;
}