JSFiddle - React, Tailwind, and code Playground

by Patrick Kershner

HTML

<div id="sociaicons">
    <ul class="social">
        <li class="facebook">
            <a href="https://www.facebook.com/pages/Daseta/562981140466217" target="_blank">
                <img src="https://cdn1.iconfinder.com/data/icons/New-Social-Media-Icon-Set-V11/512/facebook.png" /></a>
        </li>
        <li class="twitter">
            <a href="https://twitter.com/daseta1" target="_blank">
                <img src="http://paymentmagnates.com/wp-content/uploads/2014/04/twitter-icon.png" /></a>
        </li>
        <li class="tumblr">
            <a href="http://blog.daseta.com/" target="_blank">
                <img src="http://www.bainakandi.com/wp-content/uploads/2014/02/tumblr-icon.png" /></a>
        </li>
    </ul>
</div>

CSS

#socialicons {
    display:inline-block;
    position:fixed;
    left:0;
    top: 50%;
      margin-top: -50px;
  margin-left: 0;
    z-index:9999
}
#socialicons ul,li{
    list-style-type:none;
    width:75px;
}
.facebook {
    background-repeat:no-repeat;
    background-color:#cccccc;
}
.facebook img {
    width:75px;
    height:75px;
}
.twitter {
    background-repeat:no-repeat;
    background-color:#cccccc;
}
.twitter img {
    width:75px;
    height:75px;
}
.tumblr {
    background-repeat:no-repeat;
    background-color:#cccccc;
}
.tumblr img {
    width:75px;
    height:75px;
}