JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<div class="header">
    <div class="logo">
        <img src="/images/logo.png" width="96" height="82">
    </div> 
    <div id="nav">
        <a href="$HOME_PAGE_LINK$">Portfolio</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
    <div id="headerPro">
    </div>
</div>

CSS

.header {
    position:absolute;
    background-color: #2C2E31;
    border-bottom: #242426 2px solid;
    height: 182px;
    width: 100%;
}
.logo {
    text-align: center; 
    padding-top: 35px;
    position:relative;
}
#nav {
    position:relative;
    bottom: 0;
    width: 100%;
    text-align:center; 
    text-decoration:none; 
    font-size:20px;
    font-family:raleway-regular; 
}
#nav a {
    border-bottom:#FFFFFF 2px solid; 
    color:#FFFFFF;
    text-decoration:none; 
    margin-left: 8px; 
    margin-right:8px;
}
#headerPro {
    position:relative;
    float:right;
    width:100px;
    height:100px;
    background-color:red;
}