JSFiddle - React, Tailwind, and code Playground

HTML

<div class="animated">Boca Juniors</div>

CSS

.animated {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 3px solid steelblue;
  background: gold;
  font-weight: bold;
  color: steelblue;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
  width: 100%;
  height: 300px;
}
.animated:hover {
  width: 50%;
}