JSFiddle - React, Tailwind, and code Playground

HTML

<html> 
  <head> 
   <title>сайт</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <script type="text/javascript" src="tmp/gotop.js"></script>
  <link rel="stylesheet" type="text/css" href="tmp/style.css">   
   </head> 
  <body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" style="body"> 
   <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> 
   ...

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; 
  ...