JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" class="">
    
         <span id="arrowm"><i class="fa fa-angle-up"></i></span>
        
        <span id="menub"><i class="fa fa-bars"></i></span>
    
    <div id="nav">
        
        <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">HOME</a></li>
        <li><a href="">HOME</a></li>
        <li><a href="">HOME</a></li>
        </ul>    
    
    </div>   
        
    </div>
    
    
    <div id="content">
    
        <div class="wrapperbox container">
        
            <div class="box">s</div>
            <div class="box">s</div>
            <div class="box">s</div>
            <div class="box">s</div>
            
        </div>
    
    </div>
    
    
    <div id="info">
    
        
    
    </div>
    
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="jquery.fittext.js"></script>
    <script type="text/javascript">
	</script>

CSS

body {
    color: #f4ffff;
    background-color: #f4f4f4;   /* 5F6046 */ 
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
    /* overflow-y: hidden; */
}

a { text-decoration: none; list-style: none; color: white;}
a:hover { text-decoration: none; list-style: none; }

#arrowm { display: none; position: fixed; font-size: 40px; left: 90%; top: 3%;}

#header
{
    height: 350px;
    background-color: #5D8FAE;
}

#menub
{
    position: absolute;
    font-size: 30px;
    top: 30px;
    left: 85%
}

#nav { display: none; }
#nav ul {  }
#nav ul li { position: relative; display: inline; list-style-type: none; padding: 0px 30px 0px 30px; font-size: 20px; top: 38px; left: 45%; }


#content 
{
    height: 279px;
    position: relative;
}

.wrapperbox { position: relative; top: 25px; padding: 5px; display: flex; justify-content: center; flex-wrap: wrap; }
.box { position: relative; height: 150px; width: 250px; background-color: lightcoral; margin: 15px; text-align: center; padding-top: 80px;}


#info
{
    height: 500px;
    background-color: antiquewhite;
    
}

JavaScript

jQuery(document).ready(function() {
    
  jQuery("#menub").click(function() {
    
        jQuery("#nav").slideToggle(50)
        
  });
    
});