JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
div {
  width: 100px;
  height: 100px;
  border: 1px  solid red; 
}

div::before {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: #ff0;
  transition: height 1s ease-out 0.5s;
}
div:hover::before {
  height: 100px;
}