JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

<ul class="list-inline">
							<li>
								<a href="#" target="_blank">
								<span class="fb"></span>			
								</a>
							</li>
								
							<li>
								<a href="#" target="_blank">
									<span class="tw"></span>
								</a>
							</li>
									
							<li>
								<a href="#" target="_blank">
									<span class="in"></span>
								</a>									
							</li>
					</ul>

CSS

.list-inline{float:left;
            list-style:none;} 

.social-brands span a:link {
	position: relative;
	}

ul li a:link .fb span{
	background: url("http://sienaidea.com.br/img/social/icon_face.png") no-repeat;
	position: absolute;
	height:30px;
    width:30px;
    border: 30px solid black;
}

span a:link .tw{
	background: #fff url("http://sienaidea.com.br/img/social/icon_twitter.png") no-repeat;
	position: absolute;
	height:30px;
    width:30px;
}

span a:link .in{
	background: #fff url("http://sienaidea.com.br/img/social/icon_linkedin.png") no-repeat;
	position: absolute;
	height:30px;
    width:30px;
}