JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
</ul>

CSS

li {
  width: 40px;
  height: 40px;
  float: left;
  margin-right: 5px;
  background: white;
}

li:before {
  content: " ";
  transition: all 255ms ease-in;
  -moz-transition: all 255ms ease-in;
  -webkit-transition: all 255ms ease-in;
  transform: scale3d(0, 0, 0);
  -webkit-transform: scale3d(0, 0, 0);
  width: 40px;
  height: 40px;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

li:hover:before {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}