JSFiddle - React, Tailwind, and code Playground

by Opick Kusanagi

HTML

<div style="text-align: center;">
<b>Icon Flat Ui From Font Awesome</b>
<ul class="opickweblog-social-icon long-shadow">
<li><a class="facebook" href="https://www.facebook.com/opickweblog" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a class="google-plus" href="https://plus.google.com/u/0/110053213103537714080" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a></li>
<li><a class="twitter" href="https://twitter.com/opick00" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a class="pinterest" href="http://wajahilmu.blogspot.com/2015/05/cara-membuat-icon-flat-ui-menggunakan.html" rel="nofollow" target="_blank"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
<div style="text-align: center;">
<ul class="opickweblog-social-icon long-shadow">
<li><a class="user" href="http://www.blogger.com/follow-blog.g?blogID=1437088926407906290" rel="nofollow" target="_blank"><i class="fa fa-user-plus"></i></a></li>
<li><a class="instagram" href="https://instagram.com/opick00/" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a></li>
<li><a class="dropbox" href="http://wajahilmu.blogspot.com/2015/05/cara-membuat-icon-flat-ui-menggunakan.html" rel="nofollow" target="_blank"><i class="fa fa-dropbox"></i></a></li>
<li><a class="soundcloud" href="https://soundcloud.com/opick-weblog" rel="nofollow" target="_blank"><i class="fa fa-soundcloud"></i></a></li>
</ul>
</div>

CSS

.opickweblog-social-icon{padding:0;list-style:none;display:inline-block;margin:10px auto}.opickweblog-social-icon li{display:inline-block}.opickweblog-social-icon a{display:inline-block;float:left;width:32px;height:32px;font-size:20px;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 .facebook{border:2px solid transparent;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 .facebook:hover{border:2px solid #d4d4d4;color:#3B579D}.long-shadow .google-plus{border:2px solid transparent;background:#DD4A3A;text-shadow:0 0 #c23122,1px 1px #c23122,2px 2px #c23122,3px 3px #c23122,4px 4px #c23122,5px 5px #c23122,6px 6px #c23122,7px 7px #c23122,8px 8px #c23122,9px 9px #c23122,10px 10px #c23122,11px 11px #c23122,12px...