JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
  <div class="navBar">	
    <a href="#projects" id="projectButton">PROJECTS</a>
    <a href="#main">
      <img id="logo" draggable="False" src="http://rikinkatyal.me/images/logo.png" height="70"/></a>
	<a href="#skills" id="skillButton">SKILLS</a>
	<a href="#contact" id="contactButton" class="contactButton">CONTACT</a>
  </div>
</div>

CSS

#header {
    position: fixed;
    height: 70px;
    width: 100%;
    background-image: url(http://rikinkatyal.me/images/header.png);
    background-size: 100%;
    background-repeat: repeat;
    margin: 0px;
    z-index: 2;
}
.navBar {
    text-align:center;
}
.navBar a {
    text-decoration: none;
    color: #fff;
    font-family:'Source Sans Pro';
    font-weight: 300;
    -webkit-transition: all 0.5s ease-in-out;
    vertical-align: middle;
    display:inline-block;
}
.navBar .contactButton {
    top: 17px;
    right: 10px;
    float: right;
    position: fixed;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family:'Source Sans Pro';
    font-weight: 300;
    color: #fff;
    font-size: 17px;
    padding: 5px 13px 5px 13px;
    border: solid #fff 2px;
    -webkit-transition: all 0.5s ease-in-out;
}