JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Hover an icon</h1>
<nav id="fixed-nav">
  <ul>
    <li><a href="">item 1 <i class="fa fa-commenting" aria-hidden="true"></i></a></li>
    <li><a href="">item 2 <i class="fa fa-exclamation-triangle" aria-hidden="true"></i></a></li>
    <li><a href="">item 3 <i class="fa fa-hdd-o" aria-hidden="true"></i></a></li>
  </ul>
</nav>

CSS

#fixed-nav{
  position: fixed;
  top:50%;
  left:0;
  transform:translate(0, -50%);
  overflow:hidden;
}
#fixed-nav ul{
  padding:0;
  list-style:none;
  transform:translate(-100%, 0);
  margin:0;
}
.fa{
  display: inline-block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  text-align: center;
}
#fixed-nav li{
  padding:0 0 0 10px;
  transform:translate(20px, 0);
  transition:transform .4s;
}
#fixed-nav li:hover{
  transform:translate(100%, 0);
}
#fixed-nav li a{
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color:#333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
}