JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="container-menu-top">        
        <div class="menu-top">
            <div class="menu-top-center">
                <div class="icons-left">
                       <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRROdI3yg-dOO1Wl56Ci6AHheWnzUA6j01oJDvxaUNViODWLpLX" />
                    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRROdI3yg-dOO1Wl56Ci6AHheWnzUA6j01oJDvxaUNViODWLpLX" />
                </div>
                <div class="container-login">
                    <div class="logo">
                        <img src="http://staticx.ibncollege.com/wcsstore/ExtendedSitesCatalogAssetStore/907_90722_1_21939/images/FULLIMAGE_88753.jpg" />
                    </div>
                    <div class="login">
                        <input id="Name" name="name" class="form-control searchinput"type="text" placeholder="name" value=""/>
                        <input id="family" name="family" class="form-control searchinput" type="text" placeholder="family" value=""/>
                        <button style="background-color: blue; border-radius: 14px; border-style: solid;" class="btn-search" type="submit" title="Search">    
                            <div style="background-color: blue;">
                                <span class="glyphicon glyphicon-search">I</span>
                            </div>
                        </button>
                    </div>
                </div>
            </div>
            <div class="menu-top-right">
                <div class="social">
                    <ul>
                        <li class="social1"><a href=""></a></li>
                        <li class="social1"><a href=""></a></li>
                        <li class="social1"><a href=""></a></li>
                    </ul>                    
                    
                </div>
                <div class="links">
                    <a href="">Link1</a>
                    <a href="">Link1</a>
        ...

CSS

body {margin:0; padding:0;}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container-menu-top {
    width:100%;
    background-color: aqua;
}
.container-menu-bot {
    width:100%;
    background-color: green;
    min-height:38px;
    margin-top:40px;
}
.menu-top, .menu-bot {
    max-width:970px;
    width:100%;
    height:100%; 
    margin:0 auto;
    text-align:center;
    position:relative;
}
.menu-top-center {
    display:inline-block;
    width:50%;
    height:100%;    
}
.menu-top-right {
    display:inline-block;
    float:right;    
    height:100%;
    width:200px;
    padding-left:20px;
}
.icons-left {
    width:10%;
    float:left; 
    height:100%;
    padding-top:10px;
    
}
.container-login {
    width:90%;
    float:left; 
    height:100%;
    text-align:left;
}
.logo {
    text-align:center;    
}
.login {
    text-align:center;
}
@media only screen and (max-width: 600px) {
    .menu-top-center {width: calc(100% - 200px);}
}
.icons-left img {
    width:100%;
    display:block;
    padding:2px;
}
.logo img {
    height:40px;
    width:253px;
    max-width:90%;
    display:inline-block;
}
.login input, .login button {
    display:inline-block;
}
.login input {width:44%;}
@media only screen and (max-width: 600px) {
    .login input {width:100%;}
}
.social {}
.social ul {list-style:none;margin:0;}
.social li {
    height:30px;
    width:30px;
    float:right;
    background-color: blue;
    margin-left:4px; 
    margin-top:4px;
    background-repeat:no-repeat;
    background-size:cover;
}
.social1 {background-image: url(http://the-route-to-your-image.com);}
.social2 {background-image: url(http://the-route-to-your-image.com);}
.social3 {background-image: url(http://the-route-to-your-image.com);}
.links {
    clear:both;
    text-align:left;
    margin-top:4px;
}
.links a {
    display:inline-block;    
}

.menu-bot {position:relative;}
.menu-bot a {color:#fff;}
.menu-bot ul {list-style:none;...

JavaScript

$(document).ready(function () {
            $('.burger').click(function () {
                $('.menu-bot ul').toggleClass("visible"); 
            });
        });