JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="headerwrapper">
    	<div id="SocialMediaWrapper">
		<p>Stay In Touch</p>
		<ul>
			<li><a href="#" id="facebookIconHeader"><i class="fa fa-facebook-square"></i></a><li>
			<li><a href="#" id="TwitterIconHeader"><i class="fa fa-twitter-square"></i></a><li>
			<li><a href="#" id="YoutubeIconHeader"><i class="fa fa-youtube-square"></i></a><li>
			<li><a href="#" id="InstagramIconHeader"><i class="fa fa-instagram"></i></a><li>
			<li><a href="#" id="PinterestIconHeader"><i class="fa fa-pinterest-square"></i></a><li>
		</ul>
	</div>
    
    
    
</div>

CSS

#headerwrapper {
    background-color: black; 
    position: relative; 
    height: 200px; 
    width: 400px; 
}
#SocialMediaWrapper {position: absolute; top: 2px; left: 20px;}
#SocialMediaWrapper p {color: white; text-align: center; margin: 0; }
#SocialMediaWrapper ul li {display: inline-block;}
#SocialMediaWrapper ul li a {font-size: 35px; margin: 0 5px; background-color: white;}
#SocialMediaWrapper ul li a:hover {text-shadow: none;}
#SocialMediaWrapper ul li #facebookIconHeader {color: #3A5795;}
#SocialMediaWrapper ul li #TwitterIconHeader {color: #55ACEE;}
#SocialMediaWrapper ul li #YoutubeIconHeader {color: #CC181E;}
#SocialMediaWrapper ul li #InstagramIconHeader {color: #49769C;}
#SocialMediaWrapper ul li #PinterestIconHeader {color: #C91D1E; border-top:2px solid black;}
#SocialMediaWrapper ul li i{
    border: 2px solid black;
    box-sizing: content-box;
    overflow: hidden;
}