JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<div class="options">
    <div class="like" title="Like image"><a href="/signup?ref=like&amp;imageId=267043"><em></em><span>Like</span></a></div>
    <div class="save" title="Save image"><a href="/signup?ref=save&amp;imageId=267043"><em></em><span>Save</span></a></div>
    <div class="share" title="Share"><a href="http://www..com/image/267043/fox-mark-1-by-ivan-bobrov"><em></em><span>Share</span></a></div>
    <div class="links" title="file links"><a href="/signup?ref=note&amp;imageId=267043"><em></em><span>Links</span></a></div>
</div>

CSS

.options {
opacity: 1;
border: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0px;
left: 0px;
-moz-transition: opacity 0.15s ease-out;
-o-transition: opacity 0.15s ease-out;
-webkit-transition: opacity 0.15s ease-out;
-ms-transition: opacity 0.15s ease-out;
transition: opacity 0.15s ease-out;
background-color: white;
height: 50px;
width: 250px;
z-index: 10;

border-bottom: 1px solid #e8e7e3;
padding: 0 0 8px 0;
margin-bottom: 8px;
}
.options div{
border-bottom: 1px solid #e8e7e3;
padding: 0 0 8px 0;
margin-bottom: 8px;
}

.options .save, .options .links, .options .like, .options .share {
cursor: pointer;
position: absolute;
top: 0px;
width: 62px;
height: 50px;
-moz-transition: opacity 0.15s ease-out;
-o-transition: opacity 0.25s ease-out;
-webkit-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}

.options .like {
}
.options .save {
    left:62px;
}
.options .share {
    left:124px;
}
.options .links {
    left:186px;
}
.options a {
display: block;
padding-bottom: 8px;
}
.options a:hover{
    border-bottom:1px solid #4abbed;
}
.options em {
background: transparent url('http://www.kwikup.com/flicitup/images/png_main.png') no-repeat left top;
width: 21px;
height: 21px;
display: block;
margin: 9px auto 1px auto;
}
.options span {
text-align: center;
width: 100%;
display: inline-block;
font-size: 9px;
color: #666666;
line-height: 9px;
margin: 2px 0 0 0;
}
.options .links em{
background-position: -441px -238px;
}
.options .like em{
background-position: -501px -212px;
}
.options .save em{
background-position: -418px -212px;
}
.options .share em {
background-position: -470px -212px;
}
.links:hover em {
background-position: -469px -238px;
}
.like:hover em{
background-position: -530px -212px;
}
.save:hover em{
background-position: -442px -212px;
}
.share:hover em{
background-position: -392px -212px;
}