JSFiddle - React, Tailwind, and code Playground

by ozgurgorgulu

HTML

<ul class="tooltip-sosyal-og">
	<li><a class="tooltip-facebook" href="#"><span>Facebook</span></a></li>
	<li><a class="tooltip-twitter" href="#"><span>Twitter</span></a></li>
	<li><a class="tooltip-youtube" href="#"><span>YouTube</span></a></li>
	<li><a class="tooltip-blogger" href="#"><span>Blogger</span></a></li>
	<li><a class="tooltip-rss" href="#"><span>RSS</span></a></li>
</ul>

CSS

.tooltip-sosyal-og li{list-style:none!important;float:left}
.tooltip-sosyal-og li a span{width:100px;height:auto;line-height:20px;left:50%;margin-left:-64px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#000;text-shadow:1px 1px 1px rgba(0,0,0,0.1);-webkit-text-shadow:1px 1px 1px rgba(0,0,0,0.1);-moz-text-shadow:1px 1px 1px rgba(0,0,0,0.1);text-align:center;border:4px solid #fff;background:#eee;text-indent:0;position:absolute;pointer-events:none;bottom:100px;opacity:0;box-shadow:0 0 1px #000;-webkit-box-shadow:0 0 1px #000;-mozbox-shadow:0 0 1px #000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;padding:10px}
.tooltip-sosyal-og li a:hover span{opacity:0.9;bottom:70px}
.tooltip-sosyal-og{width:435px;height:70px;margin:80px auto 30px;padding:0}
.tooltip-sosyal-og ol,ul{list-style:none;}
.tooltip-sosyal-og li a{display:block;width:62px;height:64px;outline:none;background:transparent url(https://lh6.googleusercontent.com/-T9jY7Ap-UA4/UTiODu1bUEI/AAAAAAAAEXE/K4JbbtvegN4/s360/tooltip_sosyal_sprite.png) no-repeat top left;text-indent:-9000px;position:relative;margin:0 2px}
.tooltip-sosyal-og li .tooltip-facebook{background-position:0 -148px}
.tooltip-sosyal-og li .tooltip-twitter{background-position:0 -296px}
.tooltip-sosyal-og li .tooltip-youtube{background-position:0 0}
.tooltip-sosyal-og li .tooltip-blogger{background-position:0 -222px}
.tooltip-sosyal-og li .tooltip-rss{background-position:0 -74px}
.tooltip-sosyal-og li a span:before,.tooltip-sosyal-og li a span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1)}
.tooltip-sosyal-og li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #fff}