JSFiddle - React, Tailwind, and code Playground

by Bernardinus Kunto Wijoyo

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div style="text-align: center;">
    <strong>Long Shadow Button by Opick Weblog</strong><br/>
    <ul class="opickweblog-flat-icon long-shadow">
<li><a class="blue" href="https://www.facebook.com/opickweblog" rel="nofollow" target="_blank">Blue</a></li>
<li><a class="red" href="https://plus.google.com/u/0/110053213103537714080" rel="nofollow" target="_blank">Red</a></li>
<li><a class="bright-blue" href="https://twitter.com/opick00" rel="nofollow" target="_blank">Bright Blue</a></li>
<li><a class="dark-red" href="http://wajahilmu.blogspot.com/2015/05/cara-membuat-icon-flat-ui-menggunakan.html" rel="nofollow" target="_blank">Dark Red</a></li>
</ul>
</div>
<div style="text-align: center;">
<ul class="opickweblog-flat-icon long-shadow">
<li><a class="black" href="http://www.blogger.com/follow-blog.g?blogID=1437088926407906290" rel="nofollow" target="_blank">Black</a></li>
<li><a class="dark-blue" href="https://instagram.com/opick00/" rel="nofollow" target="_blank">Dark Blue</a></li>
<li><a class="sea-blue" href="http://wajahilmu.blogspot.com/2015/05/cara-membuat-icon-flat-ui-menggunakan.html" rel="nofollow" target="_blank">Sea Blue</a></li>
<li><a class="orange" href="https://soundcloud.com/opick-weblog" rel="nofollow" target="_blank">Orange</a></li>
</ul>
    <br/><br/>
   <ul class="opick-flat-icon long-shadow">
       <li><a class="black" href="http://www.blogger.com/follow-blog.g?blogID=1437088926407906290" rel="nofollow" target="_blank"><i class="fa fa-eye"></i> Demo</a></li>
       <li><a class="dark-blue" href="https://instagram.com/opick00/" rel="nofollow" target="_blank"><i class="fa fa-cloud-download"></i> Download</a></li>
</ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

strong {
    text-align:center;
    color:#444;
    font-family:'Open Sans',sans-serif;
    line-height:normal;
    font-size:26px;
}

.opickweblog-flat-icon{padding:0;list-style:none;display:inline-block;margin:10px auto}.opickweblog-flat-icon li{display:inline-block}.opickweblog-flat-icon a{display:inline-block;float:left;width:120px;height:40px;font-size:20px;font-family:'Open Sans';font-weight:bold;color:#FFF;text-decoration:none;cursor:pointer;text-align:center;line-height:32px;background:#000;position:relative;transition:.5s}.long-shadow a{overflow:hidden;font-size:20px;border-radius:4px;margin:0 5px}.long-shadow a:hover{background:#fff;text-shadow:0 0 #d4d4d4,1px 1px #d4d4d4,2px 2px #d4d4d4,3px 3px #d4d4d4,4px 4px #d4d4d4,5px 5px #d4d4d4,6px 6px #d4d4d4,7px 7px #d4d4d4,8px 8px #d4d4d4,9px 9px #d4d4d4,10px 10px #d4d4d4,11px 11px #d4d4d4,12px 12px #d4d4d4,13px 13px #d4d4d4,14px 14px #d4d4d4,15px 15px #d4d4d4,16px 16px #d4d4d4,17px 17px #d4d4d4,18px 18px #d4d4d4,19px 19px #d4d4d4,20px 20px #d4d4d4,21px 21px #d4d4d4,22px 22px #d4d4d4,23px 23px #d4d4d4,24px 24px #d4d4d4,25px 25px #d4d4d4,26px 26px #d4d4d4,27px 27px #d4d4d4,28px 28px #d4d4d4,29px 29px #d4d4d4,30px 30px #d4d4d4}
.long-shadow .blue{background:#3B579D;text-shadow:0 0 #2d4278,1px 1px #2d4278,2px 2px #2d4278,3px 3px #2d4278,4px 4px #2d4278,5px 5px #2d4278,6px 6px #2d4278,7px 7px #2d4278,8px 8px #2d4278,9px 9px #2d4278,10px 10px #2d4278,11px 11px #2d4278,12px 12px #2d4278,13px 13px #2d4278,14px 14px #2d4278,15px 15px #2d4278,16px 16px #2d4278,17px 17px #2d4278,18px 18px #2d4278,19px 19px #2d4278,20px 20px #2d4278,21px 21px #2d4278,22px 22px #2d4278,23px 23px #2d4278,24px 24px #2d4278,25px 25px #2d4278,26px 26px #2d4278,27px 27px #2d4278,28px 28px #2d4278,29px 29px #2d4278,30px 30px #2d4278}.long-shadow .blue:hover{border:2px solid #d4d4d4;color:#3B579D}.long-shadow .red{background:#DD4A3A;text-shadow:0 0 #c23122,1px 1px...