JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<a href="#" class="insta">
    <span class="text">Follow me on <b>Instagram</b></span>
    <span class="right">
        <span class="number">56</span>
    </span>
</a>

CSS

html{
  background-color: #557ea0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#557ea0), to(#30597d));
  background-image: -webkit-linear-gradient(top, #557ea0, #30597d);
  background-image:    -moz-linear-gradient(top, #557ea0, #30597d);
  background-image:     -ms-linear-gradient(top, #557ea0, #30597d);
  background-image:      -o-linear-gradient(top, #557ea0, #30597d);
  background-image:         linear-gradient(to bottom, #557ea0, #30597d);
    height:100%;
}
body{padding:20px;}

.insta{
    display:inline-block;
    color:#362818;
    font-family:arial;
    text-decoration:none;
    border-radius:3px;
    text-shadow:0 1px 0 #fff;
    height:31px;
    line-height:31px;
    box-shadow:0 1px 0 #fff inset, 0 2px 2px rgba(0,0,0,0.5);
    
    
  background-color: #ffffff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image:    -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image:     -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image:      -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image:         linear-gradient(to bottom, #ffffff, #e6e6e6);
    position:relative;
}
.insta .text{
    padding:5px;
    padding-left:15px;
    padding-right:35px;
}
.insta .right{
    width:44px;
    background:#333;
    height:31px;
    margin-right:16px;
}