JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<div>
    <a href="/">
        <div id="logo"><img src="http://www.lehigh.edu/google/google_search.png" alt="Home"/></div>
        <div id="headtag"><img src="http://codeboxr.com/wp-content/uploads/2012/06/6_logo_predesign.jpg" alt="Home"/></div>
        <div id="tagline"><img src="https://www.google.com/logos/doodles/2014/world-cup-2014-2-4845213826678784.3-hp.gif" alt="Home"/></div>
    </a>
</div>
<div> 
    <a href="/" class="here">Home</a>
    <a href="/about.php">About</a>      
    <a href="/services.php">Services</a>
    <a href="/pricing.php">Pricing</a>
    <a href="/contact.php">Contact Us</a>
    <!--input id="srchbar" type="search" placeholder="Search"-->
</div>
</nav>

CSS

nav{
    display: -webkit-flex;
    display: flex; 

    -webkit-align-self: center;
    align-self: center; 
    
    -webkit-justify-content: center; 
    justify-content: center; 

    width: 100%;
    /*max-width: 1000px;*/
    min-height: 3em;

    z-index: 999;
    position: fixed;
    background: #000;

    box-shadow: 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6);
}
nav>div{
    text-align: center;

    -webkit-flex: 1;
    flex: 1;

    -webkit-align-self: center;
    align-self: center; 
}
#logo{
    display: -webkit-flex;
    display: flex;
    cursor: default;
    -webkit-align-self: center;
    align-self: center;

    margin-left: 1em;

    color: #fff;
    font-weight: bold;
    font-size: 1.15em;
    line-height: 1.43;  
    -webkit-font-smoothing: antialiased;
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
    
    width: 2.75em;
    height: 2.75em;
}
#headtag{
    display: -webkit-flex;
    display: flex;
    cursor: default;
    -webkit-align-self: center;
    align-self: center;

    margin-left: 1em;

    color: #fff;
    font-weight: bold;
    font-size: 1.15em;
    line-height: 1.43;  
    -webkit-font-smoothing: antialiased;
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
    
    width: 8em;
    height: 2em;
}
#tagline{
    display: -webkit-flex;
    display: flex;
    cursor: default;
    -webkit-align-self: center;
    align-self: center;

    color: #fff;
    font-weight: bold;
    font-size: 1.15em;
    line-height: 1.43;  
    -webkit-font-smoothing: antialiased;
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
    
    width: 14em;
    height: 2.75em;
}
nav>div{
    width: 100vw;    
    display: -webkit-flex;
    display: flex;
}
nav>div:nth-of-type(1){
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
nav>div:nth-of-type(2){
    -webkit-justify-content: center;
    justify-content:...