JSFiddle - React, Tailwind, and code Playground

by Kevin_Granger

HTML

<button class="btn-twitter"><i></i>Share</button>
<button class="btn-google-plus"><i></i>Share</button>
<button class="btn-facebook"><i></i>Share</button>
<button class="btn-pinterest"><i></i>Share</button>
<button class="btn-linkedin"><i></i>Share</button>

CSS

.btn-facebook, .btn-twitter, .btn-google-plus, .btn-pinterest, .btn-linkedin { color: #333333; background-color: white; border: solid 1px #333333; display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; padding: 4px 8px 4px 4px; font-size: 13px; line-height: 32px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-google-plus:hover, .btn-google-plus:focus, .btn-google-plus:active, .btn-pinterest:hover, .btn-pinterest:focus, .btn-pinterest:active, .btn-linkedin:hover, .btn-linkedin:focus, .btn-linkedin:active { color: white; }
.btn-facebook i, .btn-twitter i, .btn-google-plus i, .btn-pinterest i, .btn-linkedin i { vertical-align: middle; display: inline-block; height: 32px; width: 32px; margin-right: 4px; background:...