JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
            <span id="nav-icon"> <img src="http://i57.tinypic.com/2w4wdxv.png" alt="nav-menu"> </span>
            <ul>
                <li> <a href="#"> LINK </a> </li>
                <li> <a href="#"> LINK </a> </li>
                <li> <a href="#"> LINK </a> </li>
                <li> <a href="#"> LINK </a> </li>
                <li> <a href="#"> LINK </a> </li>
            </ul>

            <div class="navimage">
                <a href="#"> <img src="http://i61.tinypic.com/hx0i0o.jpg" alt="facebook-icon" /> </a>
                <a href="#"> <img src="http://i62.tinypic.com/30mwq49.jpg" /> </a> 
            </div>
        </div>

CSS

#nav {
    border-bottom:1px solid #FFF;
    margin-bottom:20px;
    padding:0;
    text-align:center;
    max-width:95%;
    margin:0 auto;
}

#nav #nav-icon img {
    display:none;
}

#nav li {
    display:inline;
}

#nav a {
    display:inline-block;
    padding:15px;
    font-family: 'alegreya_sansregular', sans-serif;
    font-weight:bold;
    font-size:15px;
    margin:15px 0;
}

#nav a:hover {
    color:#DEB887;
    text-decoration:none;
}

.navimage img {
    width:30px;
    height:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
}

.imgnav img {
    margin-left:-25px;
}

.navimage {
    float:right;
    margin-top:-80px;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

    #nav {text-align:left;}
    #nav-icon img {display:inline-block;height:40px;}
    #nav ul, #nav:active ul {display:none;position:absolute;padding: 20px;background:#fff;border: 3px solid #DEB887;left:35px;top:70px;width:20%;border-radius:0 0 3px 3px;z-index:9999;}
    #nav:hover ul {display:block;}
    .navimage {margin-top:-300px;}
    #nav li {text-align:center;display:block;}
    #nav ul li a {color:#000;padding:0;}
}