JSFiddle - React, Tailwind, and code Playground

by Kartic Bedi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Give Background color to Font-Awesome without making it over the icons :) by @KarticBedi http://stackoverflow.com/questions/27264819/how-do-i-give-a-font-awesome-icon-a-background-color/31045993#31045993 -->

<div class="background">
    <i class="fa fa-facebook-square fb-btn"></i>
    <i class="fa fa-twitter-square twt-btn"></i>
    <i class="fa fa-google-plus-square gp-btn"></i>
</div>

CSS

.fb-btn{
    background-color: #fff;
    border-radius: 50% 8px 10px 50%;
    color: #305891;
    font-size: 40px;
    height: 32px;
    line-height: 30px;width: 32px;
    margin: 5px;
}

.twt-btn{
    background-color: #fff;
    border-radius: 50%;
    color: #2ca8d2;
    font-size: 40px;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    width: 30px;
}

.gp-btn{
    background-color: #fff;
    border-radius: 50%;
    color: #dd4b39;
    font-size: 40px;
    height: 30px;
    line-height: 30px;
    width: 30px;
    margin: 5px;
}

.background{
    background-color:#cccccc;
    width:150px;
    height:60px;
    padding:60px 50px;
}