JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="eq">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

CSS

.eq{
  width:14px;
  height:15px;
  position:relative;
}
.bar1, .bar2, .bar3{
  float:left;
  width:4px;
  height:100%;
  background:black;
  position:absolute;
  bottom:0;
}
.bar1{-webkit-animation: bar1 4s ease-in-out infinite;}
.bar2{-webkit-animation: bar2 4s ease-in-out infinite; left:5px;}
.bar3{-webkit-animation: bar3 4s ease-in-out infinite; left:10px;}
@keyframes bar1 {
 0%   {height: 100%;} 10%  {height: 80%;} 20%  {height: 90%;} 30%  {height: 1%;}
 40%  {height: 60%;} 50%  {height: 40%;} 60%  {height: 90%;} 70%  {height: 70%;}
 80%  {height: 100%;} 90%  {height: 5%;} 100%  {height: 100%;}
}
@keyframes bar2 {
 0%   {height: 10%;} 10%  {height: 60%;} 20%  {height: 20%;} 30%  {height: 80%;}
 40%  {height: 40%;} 50%  {height: 90%;} 60%  {height: 30%;} 70%  {height: 100%;}
 80%  {height: 5%;} 90%  {height: 50%;} 100%  {height: 10%;}
}
@keyframes bar3 {
    0%   {height: 50%;}
    10%  {height: 20%;}
    20%  {height: 70%;}
    30%  {height: 50%;}
    40%  {height: 1%;}
    50%  {height: 80%;}
    60%  {height: 50%;}
    70%  {height: 90%;}
    80%  {height: 30%;}
    90%  {height: 1%;}
    100%  {height: 10%;}
}