JSFiddle - React, Tailwind, and code Playground

by xiyangbaixue

HTML

<div class="demo">
    <div>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</div>

CSS

div.demo {
  float: left;
  border:1px solid #ccc;
}
div.demo i {
  cursor: pointer;
  height: 50px;
  transition: opacity 2s;
  width: 50px;
  background: #000;
  float: left;
  margin: 5px;
  opacity: 0;
}
div.demo i:hover {
  opacity: 1;
  transition-duration: 0s;
}