JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav_bar"> 
           <div id="menu_container"> 
         
               <ul id="menu"> 
                <li><a href="#">Home </a></li>
                 <li><a href="#" id="places">About Us</a> 
                    <ul id="dropdown1"> 
                        <li><a href="http://google.com">Our Founder</a></li> 
                        <li><a href="#">Our Mission</a></li> 
                    </ul> 
                </li> 
                <li><a href="#">Meet The Team</a> 
                    <ul id="dropdown2"> 
                        <li><a href="#">Our Founder</a></li> 
                        <li><a href="#">Our Directors</a></li> 
                        <li><a href="#">Our Teachers</a></li> 
                        <li><a href="#">Employment Opportunities</a></li> 
                        
                    </ul> 
                </li> 
                <li><a href="#">Testimonials</a>
                    <ul>
                        <li><a href="#">Students</a></li>
                        <li><a href="#">Adults</a></li>
                        <li><a href="#">Corporate</a></li>
                    </ul>
                </li>
                
                  <li><a href="#">Programs</a>
                    <ul>
                        <li><a href="#">Student Services</a></li>
                        <li><a href="#">Adult Programs</a></li>
                        <li><a href="#">Business Program</a></li>
                        <li><a href="#">Community</a></li>
                    </ul>
                </li>
                   <li><a href="#">Press Releases</a>
                 
                </li>
                <li><a href="#">Sponsoring Partnerships</a></li>
            </ul> 
            
        </div> 
</div> 

 
     <script type="text/javascript" > 
 
 
        $(function() {
            $('#menu li li').hover(function() {
 
                $(this).animate({ paddingLeft: '+=15px' }, 300);
 
            }, function() {
 
            ...

CSS

#header
{
 
  padding:0px;
 margin:20px;
  position:absolute;
  height:100px;
  width:1320px;
  color:#1A1007;
  background-color:#947760 ;
  
  
}
body 
{
    background-color:#1E1914;
    margin:0px;
    padding:0px;
}
#content
{
    margin:20px;
    padding:0px;
    background-color:#FFFFFF;
    height:900px;
    width:100%;
    position:relative;
    z-index:-4;
}

 #nav_bar
 {
   position:absolute;
   height:30px;
   background-color:#1A1007;
   top:120px;
   padding:0;
   margin-left:20px;
   width:1320px;
   border-top:2px solid #281E16;
   color:#ff8b00;
   float:left;
   clear:both;
   
 }
#menu_container *
{
    margin:0;
    padding:0;
 
 
}
#menu_container 
{
    float:left;
    clear:both;
    margin-left:250px;
       
 
}
#menu_container a 
{
display:block;
  padding:.3em 6px;
color:#C28E5B;
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
font-weight:bold;
text-decoration:none;
}
   
   #menu_container ul  /*menu items list*/
{
  
    
 
    float:left;
    position:relative;
   
}
#menu_container ul li  /*menu items links*/
{
    border-left:0px solid;
    border-right:1px solid;
    list-style-type:none;
    float:left;
    position:relative;
    margin-left:10px;
    margin-right:10px;
    padding-right:5px;
    top:2px;
}
 
#menu_container li ul /*drop downs*/
 
{
    position:absolute;
    width:7em;
    display:none;
    float:left;
    
}
#menu_container li:hover ul
{
    
    display:block;
    
}
#menu_container li ul li
{
 
    width:100px;
     background-color:#EBCFB4;
     border:1px solid #947760;  
     
 
     
}
   #menu_container li ul li a
{
 
    color:#041010;     
}
   .dropdownhoverIn 
{
    background-color: White;
    color:Black;
    
   
}