JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<!-- facebook -->
<a href="#" class="social-btn facebook"><i class="fa fa-facebook-square"></i> Facebook</a><br>
<!-- flickr -->
<a href="#" class="social-btn flickr"><i class="fa fa-flickr"></i> Flickr</a><br>
<!-- github -->
<a href="#" class="social-btn github"><i class="fa fa-github-square"></i> GitHub</a><br>
<!-- google -->
<a href="#" class="social-btn google"><i class="fa fa-google-plus-square"></i> Google</a><br>
<!-- linkedin -->
<a href="#" class="social-btn linkedin"><i class="fa fa-linkedin-square"></i> Linkedin</a><br>
<!-- skype -->
<a href="#" class="social-btn skype"><i class="fa fa-skype"></i> Skype</a><br>
<!-- youtube -->
<a href="#" class="social-btn youtube"><i class="fa fa-youtube-play"></i> YouTube</a><br>
<!-- twitter -->
<a href="#" class="social-btn twitter"><i class="fa fa-twitter"></i> Twitter</a>

CSS

.social-btn{
  background: #f8f8f8;
  border: #ddd 1px solid;
  color: #777777;
  border-radius: 3px;  
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px;   
  -o-border-radius: 3px;  
  -ms-border-radius: 3px;  
  padding: 4px 10px;
  margin: 2px 0;
  display: inline-block;
  font: 12px Helvetica-neue, Arial, sans-serif;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
  transition: .3s linear .1s;
}
.social-btn:hover{
  color: #fff;
}
.facebook{
  color: #3b5998;
}
.facebook:hover{
  background: #3b5998;
  border-color: #1f4189;
}
.flickr{
  color: #f3006f;
}
.flickr:hover{
  background: #f3006f;
  border-color: #dc0065;
}
.github{
  color: #333;
}
.github:hover{
  background: #333;
  border-color: #111;
}
.google{
  color: #dd4b39;
}
.google:hover{
  background: #dd4b39;
  border-color: #bd4233;
}
.linkedin{
  color: #0077b5;
}
.linkedin:hover{
  background: #0077b5;
  border-color: #006599;
}
.skype{
  color: #00abea;
}
.skype:hover{
  background: #00abea;
  border-color: #009cd6;
}
.youtube{
  color: #cc181e;
}
.youtube:hover{
  background: #cc181e;
  border-color: #ad1419;
}
.twitter{
  color: #55acee;
}
.twitter:hover{
  background: #55acee;
  border-color: #468fc6;
}