JSFiddle - React, Tailwind, and code Playground

by alga noto

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Open+Sans:400,600,300&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<div id="menu">
    <div id="menu-container">
        <div id="logo"></div>
        <div id="box">
            <ul>
                <li><a>Quem somos</a>

                </li>
                <li><a>Produtos</a>

                </li>
                <li><a>Contato</a>

                </li>
                <li><a>|</a>

                </li>
                <li><a class="active">ENG</a>

                </li>
                <li><a>|</a>

                </li>
                <li><a>PT</a>

                </li>
                <li><a>|</a>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS

body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    font-family:'Open Sans', sans-serif;
    font-size:87.5%;
}
#menu {
    width:100%;
    height:120px;
}
#logo {
    width:120px;
    height:120px;
    background: url('https://dl.dropboxusercontent.com/u/59895113/pnsaude.png') white no-repeat 50%;
    float:left;
    
}
#menu-container {
    width:70%;
    margin:0 auto;
    height:120px;
}
#box {
    float:right;
    height:120px;
    display:table;
}
ul {
    vertical-align: middle;
    display:table-cell;
    list-style-type: none;
}
li {
    display:inline;
}
a {
    letter-spacing: 1px;
    font-weight:300;
    float:left;
    padding:1em;
}
a.active {
    font-weight:400;
    color:#1593D1;
}
a:hover {
    color:#1593D1;
}


@media all and (min-width : 768px) and (max-width : 1024px) {
    #menu-container {
        width:85%;
        height:120px;
        background:blue;
    }
}