JSFiddle - React, Tailwind, and code Playground

HTML

<body> 
   <center> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
     <caption style="align: top;">  
        <ul class="menu"> 
         <li class="header"><a href="#">аааааа</a> 
         <li class="header"><a href="#">бббббб</a> 
          <ul> 
           <li><a href="#">1.2.1</a> 
           <li><a href="#">1.2.2</a> 
           <li><a href="#">1.2.3</a> 
           <li><a href="#">1.2.4</a> 
          </ul> 
         <li class="header"><a href="#">вввввв</a> 
          <ul> 
           <li><a href="#">1.3.1</a> 
           <li><a href="#">1.3.2</a> 
           <li><a href="#">1.3.3</a> 
           <li><a href="#">1.3.4</a> 
           <li><a href="#">1.3.5</a> 
           <li><a href="#">1.3.6</a> 
          </ul> 
          <li class="header"><a href="#">гггггг</a> 
          <ul> 
           <li><a href="#">1.4.1</a> 
           <li><a href="#">1.4.2</a> 
           <li><a href="#">1.4.3</a> 
          </ul> 
         <li class="header"><a href="#">дддддд</a> 
          <ul> 
           <li><a href="#">1.5.1</a> 
           <li><a href="#">1.5.2</a> 
           <li><a href="#">1.5.3</a> 
           <li><a href="#">1.5.4</a> 
           <li><a href="#">1.5.5</a> 
          </ul> 
         <li class="header"><a href="#">ееееее</a> 
          <ul> 
           <li><a href="#">1.6.1</a> 
           <li><a href="#">1.6.2</a> 
          </ul>         
           <li class="header"><a href="#">жжжжжж</a> 
       </ul>
     </caption> 
   <tr>
   <td>
    <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><a href="#">2.2</a> 
          <li><a href="#">2.3</a> 
          <li><a href="#">2.4</a> 
          <li><a href="#">2.5</a> 
         </ul><br> 
      </td> 
      <td style="width: 76%; vertical-align: top; padding: 10 0 0 20px" align="center"> 
   ...

CSS

body { 
     background: #fff url(header.gif) repeat-x left 0; 
     font-family:Verdana, Arial, Helvetica, sans-serif; 
     font-size:12px; 
     color:#000000 
    } 
  
     /*Меню*/ 
     .header { 
      text-transform: uppercase; 
      text-align: center; 
      padding: 10px 30px;
      } 
     .menu { 
      display: block; 
      margin: 0; 
      padding: 0; 
     } 
     .menu li { 
      float: left; 
      list-style: none; 
     } 
     .menu li a { 
      display: block; 
      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; 
    } 
     
   ...