JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class='pinterest' title='Pinterest'><img src='https://raw.githubusercontent.com/danleech/simple-icons/master/icons/pinterest/pinterest-128.png' alt='Pinterest'></div>
<div class='facebook' title='Facebook'><img src='https://raw.githubusercontent.com/danleech/simple-icons/master/icons/facebook/facebook-128.png' alt='Facebook'></div>
<div class='twitter' title='Twitter'><img src='https://raw.githubusercontent.com/danleech/simple-icons/master/icons/twitter/twitter-128.png' alt='Twitter'></div>
<div class='gplus' title='Google+'><img src='https://raw.githubusercontent.com/danleech/simple-icons/master/icons/googleplus/googleplus-128.png' alt='Google+'></div>
<div class='insta' title='Instagram'><img src='https://raw.githubusercontent.com/danleech/simple-icons/master/icons/instagram/instagram-128.png' alt='Instagram'></div>
<button class='settings'><span class='fa fa-cog fa-2x'></span></button>

CSS

div, button {
    margin: 10px;
}
.pinterest {
    opacity: 0.9;
    background: #cb2027;
    height: 50px;
    width: 50px;
    cursor: pointer;
    border-radius: 50%;
}
.pinterest img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
}
.pinterest:hover {
    opacity: 1;
    border-bottom: 3px solid #a21a1f;
    height: 47px;
}
.pinterest:active {
    border-bottom: 0px;
    border-top: 3px solid #a21a1f;
    height: 47px;
}
.facebook {
    opacity: 0.9;
    background: #3b5998;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%
}
.facebook img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.facebook:hover {
    opacity: 1;
    border-bottom: 3px solid #2f477a;
    height: 47px;
}
.facebook:active {
    border-bottom: 0px;
    border-top: 3px solid #2f477a;
    height: 47px;
}
.twitter {
    opacity: 0.9;
    background: #00aced;
    height: 50px;
    width: 50px;
    cursor: pointer;
    border-radius: 50%;
}
.twitter img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.twitter:hover {
    opacity: 1;
    border-bottom: 3px solid #008abe;
    height: 47px;
}
.twitter:active {
    border-bottom: 0px;
    border-top: 3px solid #008abe;
    height: 47px;
}
.gplus {
    opacity: 0.9;
    background: #d14836;
    height: 50px;
    width: 50px;
    cursor: pointer;
    border-radius: 50%;
}
.gplus img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.gplus:hover {
    opacity: 1;
    border-bottom: 3px solid #a73a2b;
    height: 47px;
}
.gplus:active {
    border-bottom: 0px;
    height: 47px;
    border-top: 3px solid #a73a2b
}
.insta {
    opacity: 0.9;
    background: #3f729b;
    height: 50px;
    width: 50px;
    cursor: pointer;
    border-radius: 50%;
}
.insta img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.insta:hover {
    opacity: 1;
    border-bottom: 3px solid #325b7c;
    height: 47px;
}
.insta:active {
    border-bottom: 0px;
    height: 47px;
   ...