JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div id="header">
    <div id='logo'>LOGO</div>
    <nav>
        <ul id="main_menu">
            <li><a href='#'>HOME</li>
                            <li><a href='#'>PAGES</li>
                            <li><a href='#'>BLOG</li>
                            <li><a href='#'>WORK</li>
                            <li><a href='#'>ELEMENTS</li>
                            <li><a href='#'>CONTACT US</a></li>
        </ul>
    </nav>
</div>

CSS

#header {
    height: 60px;
    width: 700px;
    margin: 0 auto;
    background: #1d1d1d;
    color: #fff;
}
a {
    color: #fff;
}
#logo {
    float: left;
}
ul{
    border:solid red 1px;
}


ul#main_menu{
    list-style: none;
    margin:0;
    padding: 0;
    float: right;
}
ul#main_menu li {
    float: left;
    margin-left: 10px;
}
@media screen and (max-width: 600px) {
    ul#main_menu li {
        float: none;
    }
    
    #header{
        width:100%;
    }
}