JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="header">
<div class="menu">
    <ul>
        <li>TL Custom Printing</li>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Custom Printing</a></li>
    </ul>
</div>

<div class="social">
    <a href="#" title="Follow TL Custom Printing on Twitter" alt="TL custom Print Twitter Icon"><img src="images/twitter.png" /></a>
    <a href="#" title="Like TL Custom Printing on Facebook" alt="TL custom Print Facebook Icon"><img src="images/fb.png" /></a>
    <a href="#" title="Follow TL Custom Printing on Flickr" alt="TL custom Print Flickr Icon"><img src="images/flickr.png" /></a>
    <a href="#" title="Follow TL Custom Printing on Pinterest" alt="TL custom Print Pinterest Icon"><img src="images/pinterest.png" /></a>
</div>
    </div>
</body>

CSS

/* Navigation Bar
----------------------------------------------- */
.menu{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    float: left;
    overflow: hidden;
    width: 70%;
}

.menu ul{
    list-style:none;
    background:#2d2d2d;
    margin:0;
    padding:0;
}

.menu li{
    display:inline-block;
    float:left;
}

.menu li:first-child{
    margin-left:20px;
    margin-right:20px;
    display:block;
    padding:10px;
    text-decoration:none;
    color:#ff4800;
    font-weight:bold;
    font-size:14px;
    border-top:2px solid transparent;
}

.menu a{
    display:block;
    padding:10px;
    text-decoration:none;
    color:#bbbbbb;
    border-top:2px solid transparent;
}

.menu a:hover,
.menu li.active a{
    background:#3d3d3d;
    color:#dddddd;
    border-top:2px solid #ff4800;
}


/* Social Media Icons
----------------------------------------------- */
.social {
    float:right;
    width: 100%;
    height: 100%;
    overflow: hidden;
    width: 28%;
}
.social a img
{
    margin-top: 10px;  
}
.header
{
    background: #333;
    width: 100%;
    height: 10%;
    overflow: hidden;
}