JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<script src="//platform.twitter.com/widgets.js"></script>

<div class="shares">
    <a href="http://www.facebook.com/share.php?u=http://www.pureflex.com">Share on Facebook</a>
<a href="https://twitter.com/intent/tweet?url=http://www.pureflex.com">Share on Twitter</a>
<a href="#">Share on Google+</a>
</div>

CSS

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.shares {
    padding:4px;
    background: #e3e3e3;
    border-radius:5px;
    margin:4px;
    padding:10px;
}

.shares a {
    width: 33.1%;
    background: blue;
    padding:4px 15px;
    border-radius:4px;
    color:white;
    text-decoration: none;
    display:inline-block;
    float:left;
}

.shares a:nth-child(1){background: #3b5998;}
.shares a:nth-child(2){background: #00aced;}
.shares a:nth-child(3){background: #dd4b39;}