JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="shuffle"></div>
<div class="repeat"></div>
<div class="sound shake"></div>
<div class="share flash"></div>

CSS

.shuffle, .share, .repeat, .sound{
  width: 32px;
  height: 32px;
  transition: all 0.5s ease-in-out;
}
.shuffle {background: url(https://cdn4.iconfinder.com/data/icons/defaulticon/icons/png/32x32/media-shuffle.png); 
}
.shuffle:hover{
  -webkit-transform:rotateX(180deg);
}

.repeat{
  background: url(https://cdn3.iconfinder.com/data/icons/virtual-notebook/16/button_rotate-32.png)
}
.repeat:hover{
  -webkit-transform: rotate(315deg);
}
/** **/
.sound {
  background:url(https://cdn4.iconfinder.com/data/icons/geomicons/32/672411-speaker-volume-32.png);
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
} 

@-webkit-keyframes shake { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-1px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(1px);} 
} 
@keyframes shake { 
    0%, 100% {transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-1px);} 
    20%, 40%, 60%, 80% {transform: translateX(1px);} 
} 
.shake:hover { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
}


.share {
    background:url(https://cdn3.iconfinder.com/data/icons/virtual-notebook/16/button_share-32.png);
    -webkit-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
} 

@-webkit-keyframes flash { 
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;} 
} 
@keyframes flash { 
    0%, 50%, 100% {opacity: 1;} 
    25%, 75% {opacity: 0;} 
} 
.share:hover { 
    -webkit-animation-name: flash; 
    animation-name: flash; 
}