JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div id="pre_header">
        <div class="pre_header_content">
            <div id="pre_header_content_left">
                <ul>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/voucher.png" width="12"></img>Voucher codes</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/basket.png" width="12"></img>In-store codes</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/mouse.png" width="12"></img>Online codes</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/speaker.png" width="12"></img>Advertise</li></a>
                </ul>
            </div>
            <div id="pre_header_social_icons">
                <a href="pages/#.php"><img class="header_social_icons" src="images/social/header_facebook_grey.png" onmouseover="this.src='images/social/header_facebook_white.png'" onmouseout="this.src='images/social/header_facebook_grey.png'" width="14"></img></a>
                <a href="pages/#.php"><img class="header_social_icons" src="images/social/header_twitter_grey.png" onmouseover="this.src='images/social/header_twitter_white.png'" onmouseout="this.src='images/social/header_twitter_grey.png'" width="14"></img></a>
                <a href="pages/#.php"><img class="header_social_icons" src="images/social/header_google_grey.png" onmouseover="this.src='images/social/header_google_white.png'" onmouseout="this.src='images/social/header_google_grey.png'" width="14"></img></a>
            </div>
            <div id="pre_header_content_right">
                <ul>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/login.png" width="12"></img>Login</li></a>
                    <a href="pages/#.php"><li><img class="navigation_icons" src="images/navigation/thumb.png" width="12"></img>Sign...

CSS

#pre_header {
    width:100%;
    height:30px;
    background-color:#202020;
    border-bottom:1px solid black;
}
.pre_header_content {
    margin:0 auto;
    width:1140px;
}
#pre_header_content_left {
    float:left;
}
#pre_header_content_left ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height:30px;
}
#pre_header_content_left li {
    display: inline;
    border-right: 1px solid #292929;
    border-left: 1px solid #292929;
    padding:6px 15px 5px 15px;
    margin-right:-2px;
    font-size:14px;
}
#pre_header_content_left a {
    text-decoration:none;
    color:#fff;

}
#pre_header_content_left li:hover {
    background-color:#4e4e4e;

}

#pre_header_content_right {
    float:right;
}
#pre_header_content_right ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height:30px;
}
#pre_header_content_right li {
    display: inline;
    border-right: 1px solid #292929;
    border-left: 1px solid #292929;
    padding:6px 15px 5px 15px;
    margin-right:-2px;
    font-size:14px;
}
#pre_header_content_right a {
    text-decoration:none;
    color:#fff;

}
#pre_header_content_right li:hover {
    background-color:#4e4e4e;

}
.navigation_icons {
    padding-right:5px;
}

#pre_header_social_icons { 
    float:none;
    display:inline-block;
    line-height: 30px;
     margin: 0 auto;
    position:relative;
    width: 100px;
    background-color:red;

}
.header_social_icons {
    padding-left:5px;
    padding-right:5px;
}


#main_header {
    width:100%;
    height:70px;
    background-color:#343434;
}
.main_header_content {
    margin:0 auto;
    width:1140px;
}