JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="footer-links-container">
<div class="footer-links">
    <a id="facebook" href="#"><div  class="fa fa-facebook"></div></a>
</div>

<div class="footer-links-bg"></div>
    </div>

<div class="footer-links-container">
<div class="footer-links">
    <a id="youtube" href="#"><div  class="fa fa-youtube-play"></div></a>
</div>
    
<div class="footer-links-bg"></div>
</div>

<div class="footer-links-container">
<div class="footer-links">
    <a id="twitter" href="#"><div  class="fa fa-twitter"></div></a>
</div>

<div class="footer-links-bg"></div>
</div>

<div class="footer-links-container">
<div class="footer-links">
    <a id="contattaci" href="#"><div  class="fa fa-users"></div></a>
</div>
    
    <div class="footer-links-bg"></div>
</div>

<div class="footer-links-container">
<div class="footer-links">
    <a id="aiuto" href="#"><div  class="fa fa-info"></div></a>
</div>
    
    <div class="footer-links-bg"></div>
</div>

<div class="footer-links-container">
<div class="footer-links">
    <a id="home" href="#"><div  class="fa fa-home"></div></a>
</div>
    
    <div class="footer-links-bg"></div>
</div>

<div class="footer-links-container">
<div class="footer-links" style="line-height: 43px;">
    <a id="cima" href="#"><div  class="fa fa-sort-desc"></div></a>
</div>
    
    <div class="footer-links-bg"></div>
</div>

<div class="footer-links-container">
<div class="footer-links">
    <a id="feedrss" href="#"><div  class="fa fa-rss"></div></a>
</div>
    
    <div class="footer-links-bg"></div>
</div>

CSS

body {
    background: #176093;
}

.footer-links-container {
    height: 30px; 
    width: 30px; 
    border: none; 
    position: relative;
    float: left;
    margin-right: 5px;
}

.footer-links {
    height: 30px;
    width: 30px;
    background: #fff;
    text-align: center;
    line-height: 34px;
    color: #176093;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    font-size: 20px;
    position: absolute;
    z-index: 2;
}

.footer-links-bg {
    height: 30px;
    width: 30px;
    background: #fff;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    position: absolute;
    z-index: 1;
}

.footer-links:hover {
    -webkit-animation: footer-links 0.2s 1 linear;
    -moz-animation: footer-links 0.2s 1 linear;
    -o-animation: footer-links 0.2s 1 linear;
    cursor: pointer;
}

.footer-links:hover a#facebook {
    color: #4569b7;
}

.footer-links:hover a#youtube {
    color: #e14e42;
}

.footer-links:hover a#twitter {
    color: #56c8ec;
}

.footer-links:hover a#contattaci {
    color: #fea752;
}

.footer-links:hover a#aiuto {
    color: #fea752;
}

.footer-links:hover a#home {
    color: #fea752;
}

.footer-links:hover a#cima {
    color: #fea752;
}

.footer-links:hover a#feedrss {
    color: #fea752;
}

.footer-links a:link, .footer-links a:visited {
    color: #176093;
}

@-webkit-keyframes footer-links {
     0% { line-height: 34px; opacity:1.0; filter:alpha(opacity=100); }
     49% { line-height: 0px; opacity:0.0; filter:alpha(opacity=0); }
     50% { line-height: 74px; opacity:0.0; filter:alpha(opacity=0); }
     100% { line-height: 34px; opacity:1.0; filter:alpha(opacity=100); }
}

@-moz-keyframes footer-links {
     0% { line-height: 34px; opacity:1.0; filter:alpha(opacity=100); }
     49% { line-height: 0px; opacity:0.0; filter:alpha(opacity=0); }
     50% { line-height: 74px; opacity:0.0; filter:alpha(opacity=0); }
     100% { line-height: 34px; opacity:1.0;...