JSFiddle - React, Tailwind, and code Playground

HTML

<center> 
   <table border="0" cellpadding="0" cellspacing="0"> 
    <caption style="align: top;">  
       <ul class="menu"> 
        <li class="head" class="head"><a href="#">1.1</a></li> 
        <li class="head"><a href="#">1.2</a> 
         <ul> 
          <li><a href="#">1.2.1</a></li> 
          <li><a href="#">1.2.2</a></li> 
          <li><a href="#">1.2.3</a></li> 
          <li><a href="#">1.2.4</a></li> 
         </ul> 
        </li> 
        <li class="head"><a href="#">1.3</a> 
         <ul> 
          <li><a href="#">1.3.1</a></li> 
          <li><a href="#">1.3.2</a></li> 
          <li><a href="#">1.3.3</a></li> 
          <li><a href="#">1.3.4</a></li> 
          <li><a href="#">1.3.5</a></li> 
          <li><a href="#">1.3.6</a></li> 
         </ul> 
        </li> 
         <li class="head"><a href="#">1.4</a> 
         <ul> 
          <li><a href="#">1.4.1</a></li> 
          <li><a href="#">1.4.2</a></li> 
          <li><a href="#">1.4.3</a></li> 
         </ul> 
        </li> 
        <li class="head"><a href="#">1.5</a> 
         <ul> 
          <li><a href="#">1.5.1</a></li> 
          <li><a href="#">1.5.2</a></li> 
          <li><a href="#">1.5.3</a></li> 
          <li><a href="#">1.5.4</a></li> 
          <li><a href="#">1.5.5</a></li> 
         </ul> 
        </li> 
        <li class="head"><a href="#">1.6</a> 
         <ul> 
          <li><a href="#">1.6.1</a></li> 
          <li><a href="#">1.6.2</a></li> 
         </ul> 
        </li>         
          <li class="head"><a href="#">1.7</a></li> 
      </ul> 
    </caption> 
   </table> 
   <table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td  style="width: 24%; vertical-align: top; align: center; padding: 0 0 0 20px"> 
                <ul class="menu_left"> 
         <li><a href="#">2.1</a></li> 
         <li><a href="#">2.2</a></li> 
         <li><a href="#">2.3</a></li> 
         <li><a href="#">2.4</a></li> 
         <li><a href="#">2.5</a></li> 
       ...

CSS

body { 
    background: #fff url(header.gif) repeat-x left 0; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#000000 
   } 
 
    /*Меню*/ 
    .head { 
     text-transform: uppercase; 
     text-align: center; 
     padding: 0 30; 
     } 
    .menu { 
     display: block; 
     margin: 0; 
     padding: 0; 
    } 
    .menu li { 
     float: left; 
     list-style: none; 
    } 
    .menu li a { 
     display: block; 
     padding: 10px 0px; 
     text-decoration: none; 
    } 
    .menu li:hover { 
     background: #ffc355; 
     color: #CC0000; 
    } 
 
    /*Выпадающее меню*/ 
    .menu li ul { 
     display: none; 
     padding-left: 0px; 
     text-align: left; 
     text-transform: none; 
    } 
    .menu li:hover ul { 
     display: block; 
     position: absolute; 
    } 
    .menu li:hover ul li { 
     float: none; 
     background: #ffc355; 
    } 
    .menu li:hover ul li a { 
     padding: 7px; 
    } 
          
    /*Меню слева*/ 
    .menu_left { 
     list-style: none; 
     background-color: #F8A755; 
     border-top: 1px solid #000; 
     border-left: 1px solid #000; 
     border-right: 1px solid #000;      
     border-bottom: 0px; 
     margin: 0px; 
     padding: 0px; 
     cursor: pointer; 
    } 
 
   .menu_left li a { 
     display: block; 
     border-bottom: 1px solid #000; 
     padding: 15px; 
     text-decoration: none; 
     font-size: 14px; 
    } 
   .menu_left li:hover { 
    background: #ffc355; 
    } 
    .menu_left li, a:hover { 
     color: #CC0000; 
    } 
    
   .footer { 
    background-color: #FCA555; 
    border-left: 1px solid #FCA555; 
    border-right: 1px solid #FCA555;      
    border-bottom: 1px solid #FCA555; 
    -moz-border-radius: 0 0 20 20px; 
    -webkit-border-radius: 0 0 20 20px; 
    height: 30px; 
    text-align: center; 
    text-decoration: none; 
    color: #000000; 
   } 
    
   .scrollTop { 
    background: url(totop.png) 0 0 no-repeat; 
    display:...