JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<link rel="stylesheet" href = "css/home.css" type = "text/css">
  <link href='https://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
</head>
<div class = "home-header" >
  <div class="home-header-sm">
    <a href = "#"><i class="fa fa-facebook "></i></a>
    <a href = "#" ><i class="fa fa-twitter "></i></a>
    <a href = "#" ><i class="fa fa-youtube-square "></i></a>
    </div>
  <div class="home-header-title">
  7asobate
  </div>
<nav class = "home-header-nav" >
<a href="#">HOME</a>
<a href="#">SAMPLES</a>
<a href="#">CONTACT</a>
<a href="#">HIRE ME</a>
  
    </nav>
</div>

CSS

*
{padding : 0px 0px 0px 0px ;
margin: 0px 0px 0px 0px ; 
}

.home-header
{
height:290px;
background-color:#1D233D;
color : #FFFFFF ; 
}
.home-header-sm
{
 text-align:right;
  margin-right:20px;
font-size:20px ;
  word-spacing:0px;
  
}
.home-header-sm a , .home-header-sm a:visited ,  .home-header-sm a:hover ,.home-header-sm a:active   
{
    	color :#FFFFFF ;
}
.home-header-sm a
{
  
}
 .fa
{ 
  text-align:center;
 border-style:solid;
 background-color:#ffffff;
  color:#1D233D;
  width:30px;
  padding-top:3px;
  padding-bottom:3px;
  margin:0px 0px 0px 0px !important; 
 
}
.home-header-title
{
  margin-top:12px;
  position:absolute;
  text-align:center ; 
  width:100%;
  font-size:90px;
  font-family:Playball;
}

nav a , nav a:visited ,  nav a:hover ,nav a:active
    
{
    	color :#FFFFFF ;
}

.home-header-nav
{
  position:absolute;
  width:100%;
  text-align:center;
  font-size:25px;
  margin-top:147px;
  

}

.home-header-nav a
   {
    	text-decoration : none ;
        margin-left:14.5px;
   }