JSFiddle - React, Tailwind, and code Playground
HTML
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<div class="sticky-links">
<ul>
<li>
<div class="unskew">
<a href='www.theonion.com'>
<i class="fa fa-rss" aria-hidden="true"></i>
The Onion
</a>
</div>
</li>
<li>
<div class="unskew">
<a href='http://www.google.com'>
<i class="fa fa-google-plus" aria-hidden="true"></i>
Google
</a>
</div>
</li>
<li>
<div class="unskew">
<a href='asfd'>
<i class="fa fa-facebook" aria-hidden="true"></i>
some text
</a>
</div>
</li>
</ul>
</div>
CSS
.sticky-links ul{
position: fixed;
right: -15px;
top: 50%;
z-index: 999;
}
.sticky-links li{
/*border: 1px solid black;*/
text-transform: uppercase;
/*transition-duration: 0.2s;*/
background-color: black;
transform: skew(20deg);
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
padding: 5px;
padding-right: 15px;
list-style: none;
margin-bottom: 10px;
}
.sticky-links li:hover{
background-color: #f60;
}
.sticky-links li div a{
padding: 5px;
text-transform: uppercase;
/*transition-duration: 0.2s;*/
background-color: black;
font-size: 1.75rem;
color: white;
text-decoration: none;
}
.unskew{
transform: skew(-20deg);
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
/*font awesome icon padding */
.unskew a i{
padding-right: 5px;
}
JavaScript
$('.sticky-links li').hover(
//mouse enter
function(){
$(this).find('*').css('background-color', '#f60');
},
//mouse leave
function(){
$(this).find('*').css('background-color', '#000');
}
);