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 {
  float: right;
  font-size: 20px;
  margin-right: 20px;
  margin-top: 10px;
  text-align: right;
  width: auto;
  word-spacing: 0;
}

.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 {
  background-color: #ffffff;
  border-style: solid;
  border-width: 0;
  color: #1d233d;
  float: left;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 3px;
  padding-top: 3px;
  text-align: center;
  width: 30px;
}

.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;
}