JSFiddle - React, Tailwind, and code Playground

by ozgurgorgulu

HTML

<script type="text/javascript" src="http://ozgurgorgulu.net76.net/js/siteicinsosyalmedya.js"></script>
<ul class="ozgurgorgulu-sosyal" id="ozgurgorgulu-jqueryanime">
	<li class="ozgurgorgulu-facebook"><a href="#facebook.profil.linkiniz" title="Facebook Profilim"><strong>Facebook</strong></a></li>
	<li class="ozgurgorgulu-twitter"><a href="#twitter.profil.linkiniz" title="Facebook Profilim"><strong>Twitter</strong></a></li>
	<li class="ozgurgorgulu-googleplus"><a href="#google.plus.profil.linkiniz" title="Google Plus Profiliniz"><strong>Google+</strong></a></li>
	<li class="ozgurgorgulu-youtube"><a href="#youtube.profiliniz" title="Youtube Profiliniz"><strong>Youtube</strong></a></li>
	<li class="ozgurgorgulu-rss"><a href="#rss" title="RSS"><strong>RSS</strong></a></li>
</ul>

CSS

ul.ozgurgorgulu-sosyal{list-style:none;display:inline-block;margin:15px auto}
ul.ozgurgorgulu-sosyal li{display:inline;float:left;background-repeat:no-repeat}
ul.ozgurgorgulu-sosyal li a{display:block;width:48px;height:48px;padding-right:10px;position:relative;text-decoration:none}
ul.ozgurgorgulu-sosyal li a strong{font:400 10px Arial;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px}
ul.ozgurgorgulu-sosyal li.ozgurgorgulu-facebook{
background-image:url(https://lh3.googleusercontent.com/-6enG7L_TDqs/UOBQhV1BITI/AAAAAAAAB_g/KNwlLJoY9DE/s48/sosyal_medya_v1_facebook.png)}
ul.ozgurgorgulu-sosyal li.ozgurgorgulu-twitter{background-image:url(https://lh5.googleusercontent.com/-16yr31-AOL8/UOBQ3JiIJUI/AAAAAAAACAE/1LshRSlKxOs/s48/sosyal_medya_v1_twitter.png)}
ul.ozgurgorgulu-sosyal li.ozgurgorgulu-googleplus{background-image:url(https://lh6.googleusercontent.com/-b4tzIiOqmxE/UOBQ3AlhE0I/AAAAAAAACAA/qplGHje4kco/s48/sosyal_medya_v1_google.png)}
ul.ozgurgorgulu-sosyal li.ozgurgorgulu-youtube{background-image:url(https://lh6.googleusercontent.com/-ZKbFhQQdRWI/UOBQ3sJrGFI/AAAAAAAACAI/x24j3O9OglA/s48/sosyal_medya_v1_youtube.png)}
ul.ozgurgorgulu-sosyal li.ozgurgorgulu-rss{background-image:url(https://lh6.googleusercontent.com/-PDJ9FmcFxM0/UOBQ3PN5yaI/AAAAAAAAB_8/h18y7Wwngww/s48/sosyal_medya_v1_rss.png)}