JSFiddle - React, Tailwind, and code Playground

HTML

<div id="f1">open first menu</div>
<ul id="main-menu" class="sm-blue">
      <li><a href="#">CENTRAL LAB & CRO</a></li>
      <li><a href="#">CONTACT</a></li>
</ul>
<div id="f2">open first menu</div>
<ul id="main-menu2" class="sm-blue">
      <li><a href="#">CENTRAL LAB & CRO</a></li>
      <li><a href="#">CONTACT</a></li>
</ul>

CSS

#main-menu{float:left;background:red;}
#main-menu2{float:right;background:green;}
#f1{float:left;background:red; display:none;}
#f2{float:right;background:green;display:none;}

JavaScript

$(window).resize(function() {
	  if ($(this).width() < 400) {	
		$('.sm-blue').hide();
        $('#f1').show();
        $('#f2').show();
	  	} 
	  else {	
		$('.sm-blue').show();
         $('#f1').hide();
        $('#f2').hide();
		}
    $('#f1').click(function(){
        $('#main-menu').show()  ;  
        $('#main-menu2').hide()  ;      
    });
     $('#f2').click(function(){
        $('#main-menu2').show()  ;  
        $('#main-menu').hide()  ;      
    });
});