JSFiddle - React, Tailwind, and code Playground

by Edbert

HTML

<nav>
    <div id="navMain">
        <div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div>
        <div id="navCenter">
            <img src="../GeneralImages/logo.png"/>
        </div>
        <div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div>
    </div>
</nav>

<nav>
    <div id="navMain"><div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div><div id="navCenter"><img src="../GeneralImages/logo.png"/></div><div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div></div>
</nav>

<nav>
    <div id="navMain">
        <div id="navLeft">Home&nbsp;&nbsp;&nbsp;&nbsp;My Page</div><!--
        --><div id="navCenter"><!--
            --><img src="../GeneralImages/logo.png"/><!--
        --></div><!--
        --><div id="navRight">Create Story&nbsp;&nbsp;&nbsp;&nbsp;Log Out</div><!--
    --></div>
</nav>

CSS

*{
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    background-color: #e9eaed;    
    margin: 0;
    padding: 0;
    
}

nav {
    width: 100%;
    background-color: #93bf2e;  
    font-size: 14px;
    font-weight: bold;
    color: white;
    margin: 0;
    padding: 0;
    
  
}

#navMain {
    width: 1096px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;   
    
}

#navLeft {
    width: 435px;
    margin: 0;
    padding: 15px 0 15px 40px;    
    display:inline-block;
    
}

#navRight {
    width: 435px;
    margin: 0;
    padding: 15px 40px 15px 0; 
    text-align: right;  
    display:inline-block;    
}



#navCenter {
    width:146px;
    margin: 0;
    padding: 0;     
    display:inline-block;
    vertical-align:middle;     
}