JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="icon">
   <span class="icon-bar">
     <i class="fa fa-eye icon-actions"></i>
     <i class="fa fa-eye icon-actions"></i>
     <i class="fa fa-eye icon-actions"></i>
     <i class="fa fa-eye icon-actions"></i>
     <i class="fa fa-eye icon-actions"></i>
   </span>
</div>

CSS

.icon{
    width: 20px;
    height: 20px;
    background: #cc00ff;
    background-position: right center;
    -webkit-transition: width .2s;
    padding: 10px 10px;
    position:absolute;
    top:0; 
    right:0; 
    overflow: hidden;
}
.icon:hover{
    width:160px
}
.icon-actions{
    padding-right:10px;
    padding-bottom:50px
}
.icon-bar{
    position: absolute;
    right:10px;
}
.icon-bar:hover{
}