JSFiddle - React, Tailwind, and code Playground

by codigoadicto

HTML

<div id="share-post" class="group">
    <div class="col share-twitter">a</div>
    <div class="col share-gplus">b
    
            <span class="plus-color1"></span>
            <span class="plus-color2"></span>
            <span class="plus-color3"></span>
            <span class="plus-color4"></span>    
    </div>
    <div class="col share-facebook">ac</div>
</div>

CSS

.share-gplus > .plus-color1{
    background: none repeat scroll 0 0 #E72C37;
    left: 0%;
}
.share-gplus > .plus-color2{
    background: none repeat scroll 0 0 #008DE7;
    left: 25%;    
}
.share-gplus > .plus-color3{
    background: none repeat scroll 0 0 #22C605;
    left: 50%;
}
.share-gplus > .plus-color4{
    background: none repeat scroll 0 0 #FFCA00;
    left: 75%;
}
.share-gplus > span {
    height: 4px;
    position: absolute;
    width: 40%;
    top: 0;
}
.share-gplus {
    background-color: #3F3F3F;
    color: white;
    min-height: 4px;
    overflow: hidden;
    position: relative;
}
#share-post { overflow: hidden; }
#share-post .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    height: 48px;    
}
#share-post .col:nth-child(1) { margin-left: 33.3%; }
#share-post .col:nth-child(2) { margin-left: -66.3%; }
#share-post .col:nth-child(3) { left: 0; }

.share-gplus    {background:#3A3A3A; text-align:center;}
.share-twitter  {background:#33CCFF; text-align:center;}
.share-facebook {background:#3B5997; text-align:center;}