JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<h1>Demo: CSS Social Buttons</h1>
<p>by <a href="http://twitter.com/nickla">@nickla</a>, <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/css-social-buttons">related article</a>)</p>

<h2>Default</h2>
<p>
	<a href="#" class="sb twitter">Twitter</a>
	<a href="#" class="sb facebook">Facebook</a>
	<a href="#" class="sb heart">Heart</a>
	<a href="#" class="sb linkedin">LinkedIn</a>
	<a href="#" class="sb pinterest">Pinterest</a>
	<a href="#" class="sb podcast">Podcast</a>
	<a href="#" class="sb rss">RSS</a>
	<a href="#" class="sb share_this">Share</a>
	<a href="#" class="sb star">Star</a>
	<a href="#" class="sb vimeo">Vimeo</a>
</p>

<h2>Sizes</h2>

<h3>small, default, large</h3>
<p>
	<a href="#" class="sb small twitter">Twitter</a>
	<a href="#" class="sb twitter">Twitter</a>
	<a href="#" class="sb large twitter">Twitter</a>
	<a href="#" class="sb small facebook">Twitter</a>
	<a href="#" class="sb facebook">Twitter</a>
	<a href="#" class="sb large facebook">Twitter</a>
	<a href="#" class="sb small pinterest">Twitter</a>
	<a href="#" class="sb pinterest">Twitter</a>
	<a href="#" class="sb large pinterest">Twitter</a>
</p>

<h2>Styles</h2>

<h3>min</h3>
<p>
	<a href="#" class="sb min twitter">Twitter</a>
	<a href="#" class="sb min facebook">Facebook</a>
	<a href="#" class="sb min heart">Heart</a>
	<a href="#" class="sb min linkedin">LinkedIn</a>
	<a href="#" class="sb min pinterest">Pinterest</a>
	<a href="#" class="sb min podcast">Podcast</a>
	<a href="#" class="sb min rss">RSS</a>
	<a href="#" class="sb min share_this">Share</a>
	<a href="#" class="sb min star">Star</a>
	<a href="#" class="sb min vimeo">Vimeo</a>
</p>

<h3>flat</h3>
<p>
	<a href="#" class="sb flat twitter">Twitter</a>
	<a href="#" class="sb flat facebook">Facebook</a>
	<a href="#" class="sb flat heart">Heart</a>
	<a href="#" class="sb flat linkedin">LinkedIn</a>
	<a href="#" class="sb flat pinterest">Pinterest</a>
	<a href="#" class="sb...

CSS

body {
	background: #fff;
	font: 14px/140% Arial, Helvetica, sans-serif;
	color: #666;
	width: 800px;
	max-width: 80%;
	margin: 30px auto;
} 
p {
	margin: 0 0 15px;
}
a {
	color: #669;
	text-decoration: none;
}
h1, h2, h3 {
	color: #000;
}
h2, h3 {
	line-height: 110%;
}
h2 {
	font-size: 18px;
	margin: 30px 0 15px;
}
h3 {
	margin: 20px 0 10px;
	font-size: 12px;
	font-weight: normal;
	color: #999;
}

/*

CSS Social Icons
By: Nick La (@nickla)
http://webdesignerwall.com/tutorials/css-social-buttons

Version: 1.0

*/

/************************************************************************************
SOCIAL LINK a.sb
*************************************************************************************/
a.sb,
.sb a {
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center center;
	text-indent: -900em;
	color: #333;
	text-decoration: none;
	line-height: 100%;
	white-space: nowrap;
	display: inline-block;
	position: relative;
	vertical-align: middle;
	margin: 0 2px 5px 0;
	
	/* default button color */
	background-color: #ececec;
	border: solid 1px #b8b8b9;
	
	/* default box shadow */
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.1);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.1);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.1);

	/* default border radius */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
}
/* for IE */
*:first-child+html a.sb,
*:first-child+html .sb a {
	text-indent: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}


/* SB LIST
================================================ */
.sb {
	margin: 0;
	padding: 0;
}
.sb li {
	margin: 0;
	padding: 0;
	display: inline;
}


/* SIZES
================================================ */
/* small */
a.sb.small,
.sb.small a {
	width: 26px;
	height: 26px;
	font-size: 90%;
}

/* large */
a.sb.large,
.sb.large a {
	width: 40px;
	height: 40px;
	font-size:...