JSFiddle - React, Tailwind, and code Playground

HTML

<!--SinOptic.kz-->
<table id="table_global" width="795">
<tr><td id="td_header">SinOptic</td><td id="td_header2">Интернет Магазин Оптики и Контактных Линз
<p >Тел:</p>
</td></tr>
</table>


<!--SinOptic.kz-->


<!-- MENU TOP -->

<div id="table">
<table id="table_table">


<tr><th id="padding"><a href="#"  target="_blank">Главная</a></th><th><a href="#"  target="_blank">Доставка</a></th><th><a href="#"  target="_blank">Статьи</a></th><th><a href="#"  target="_blank">Контакты</a></th><th><a href="#"  target="_blank">Изготовление очков</a></th><th><a href="#"  target="_blank">Аксессуары</th></a></tr>


<div id="sales">
<h1 id="line"><p id="red">%</p><span id="blue">НА ВСЕ ТОВАРЫ ИНТЕРНЕТ</span> <p id="red">МАГАЗИНА</p></h1>


</div>

</table>
</div>


<!-- MENU TOP END -->

<!-- MENU LEFT -->

<div id="menu6"> <ul> <li><a href="#1">Оправы</a></li> <li><a href="#2">Линзы очковые</a></li> <li><a href="#3">Солнцезащита</a></li> <li><a href="#4">Спортивные очки</a></li> <li><a
href="#5">Контактные линзы</a></li> </ul> </div>

<!-- MENU LEFT END -->




<!-- TEXT -->

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="catalog">
            <tr>
          <td>
<table width="30%" cellpadding="0" cellspacing="0" border="0" class="items"><tr><td colspan="2" class="house_name">Диоптрия
 
</td></tr><tr><td>
<a href="#" class="structure"><img border="0" src="images/Screenshot_2.png" alt="Диоптрия."
 width="200" height="157"></a>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="tparam">
<tr><td width="52%">Диоптрия</td><td width="48%">7</td></tr>
<tr><td width="52%">Диоптрия:</td><td width="48%">0</td></tr>
<tr><td width="52%">Диоптрия:</td><td width="48%">1</td></tr>
<tr><td width="52%"> Диоптрия:</td><td width="48%">1</td></tr>
<tr><td width="52%">Диоптрия:</td><td width="48%">3,9 x 4,1</td></tr>
<tr><td width="52%"> Диоптрия:</td><td width="48%">Диоптрия</td></tr>
<tr><td width="52%"> Диоптрия:</td><td width="48%">...

CSS

body{
    margin:0;
    padding:0;
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;

    }
    
#GLOBAL_DIV{
width:auto;
height:auto;
}    

/* SinOptic.kz */    

#header_global{
background-color:#FFFFFF;
}
    
#table_global{
border-collapse: collapse;
border-spacing: 0px;
background-color: #192429;
margin: 10px 0px 0px;
opacity: 0.7;
color: #FFF;
width: 100%;
}

#td_header{
font-family: Verdana,Tahoma,sans-serif;
font-size: 50px;
color: #B3D2E4;
font-weight: 900;
}

#td_header2{
font-family: Verdana,Tahoma,sans-serif;
font-weight: 700;
line-height: 20%;
opacity: 0.7;

}


/* MENU TOP */

    

    #table a {
     -moz-transition: all 0.1s ease-in-out;
     -o-transition: all 0.1s ease-in-out;
     -webkit-transition: all 0.1s ease-in-out;
     color:white;
     display:block;
     text-decoration:none;
     }
    
     #table a:hover {
     -webkit-transform: translate(8px,0);
     -moz-transform: translate(8px,0);
     -o-transform: translate(8px,0);
     color: #1FA2E1;
     }


    #table_table{
    background-color: #192429;
    margin: 10px 0px 0px;
    opacity: 0.7;
    color: #FFF;
    width: 100%;
    }
    
    

    tr, th {
    padding: 0px;
    }

    #padding{
    padding: 0 0 0 0px;
    }

    /* MENU TOP END */
    
    /* MENU LEFT */

    #menu6 ul { list-style: none; margin: 0; padding: 0; opacity: 0.8; }
    #menu6 img {
    border: none; }
    #menu6 { width: 200px; margin: 5px 0 0 0; }
    #menu6 li a {
    height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0; font-size: 10pt; font-weight: bold; background: #FFFFFF; height:
    24px; text-decoration: none; }
    #menu6 li a:link,
    #menu6 li a:visited {
    color: #FFFFFF; display: block; background:
    url(images/menu6.gif);
    padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6
    li a:active { color: #00A4E4; background:
    url(images/menu6.gif)
    0 -32px; padding: 8px 0 0 10px; }
    
    /* MENU...