JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>MATARO</title>
  <link rel="stylesheet" href="css/merlion.css">
  <link rel="stylesheet" href="css/select_style.css">
  
  <script src="js/jquery1.7.js"></script>
  <script type="text/javascript" src="js/jqgalscroll.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        $("#slider_top").jqGalScroll({ease: null,
                speed:0,
                height: '256px',
                width: '540px',
                titleOpacity : .60,
                direction : 'horizontal'});
     });
    </script>
    <script type="text/javascript">
    jQuery(document).ready(function(){ <!--делаем эмуляцию min-width: 100% для выпадающего списка для IE6 (спасибо Константину Ершову) -->
    jQuery(".cusel").each(
    function(){
    var w = parseInt(jQuery(this).width()),
        scrollPanel = jQuery(this).find(".cusel-scroll-pane");
    if(w>=scrollPanel.width())
    {
        jQuery(this).find(".jScrollPaneContainer").width(w);
        scrollPanel.width(w);
    }
    });
    });
</script>
    
    
    <script type="text/javascript" src="js/select_style.js"></script>
    
    <script type="text/javascript">
    
    jQuery(document).ready(function(){
        var params = {
                changedEl: "select.cusel_opt"
            }
            cuSel(params);
        });

  
    </script>
    
   <style>
        @import url("css/jqGalScroll.css");
   </style>  
 </head>
 <body>
 
 <div id="cont">
     <div id="otziv"><a href="#"></a></div>
     <div id="main">
          <div id="container">
  
               <div id="header">
   
                   <div id="logotip"></div>
                   
                   <div id="midle_container">
                   <div id="city_select">
                       <span style="font-weight:bold;" >Ваш город:</span>
   ...

CSS

body {
    font: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
    background: #FFF; /* Цвет фона */
    margin:0;
    padding-left:50%;

}

  a { color: #008BCE; /* Цвет ссылок */ }
   
 #otziv{
     
    background: url("../imgs/otziv.jpg") no-repeat scroll 0 0 transparent;
    height: 197px;
    width:55px;
    float:left;
    position:relative;
    left:10px;
    top:152px;
    
 
 }  
 
 img{border:none;}
 
 #main{
 
 float:left;
 width:1000px;
     background: url("../imgs/shadow.jpg") repeat-y scroll 0 0 transparent;
 
 }
 
 #cont{
    margin-left: -550px;
    position: relative;
    width: 1100px;
  }
  
  #midle_container{
  
      float:left;
  
  
  }
 #container {
    height: auto;
    width: 1000px;
}
   #header { 
    padding: 5px; /* Отступы вокруг текста */
    height:85px;
    display:block;
   }
   
   #logotip{
       background:url("../imgs/logotip.jpg") no-repeat;
       width:186px;
       height:85px;
       float:left;
       margin-right:45px;
       position:relative;
       left:24px;
   }
   
   #city_select{
   
    text-align:left;   
    font-size:14px;
    padding-top:14px;
   
   }
   
   #search_field{
   
   padding-top:12px;
   float:left;
   
   }
   
   #search_button{
   
   width:82px;
   height:35px;
   background:url("../imgs/submit_button.png") no-repeat;
   border:0;
   margin-right: 4px;
   
   
   }
   
   #search_input{
   height:25px;
   border:2px solid #cbc9c9;
   
   
       
   
   }
   #input_city_select{
   
   border:0;
   
   }
   
   .cusel_opt{
   width:102px;
   }
   #basket{
   
       background:url("../imgs/basket.png")  no-repeat ;
       width:173px;
       height:67px;
       float:left;
       margin-top: 18px;
      
   }
   #contact_information{
   
        position:relative;
        top:20px;
        float:left;
        width:180px; 
          
   }
   
   #phone{
   background:url("../imgs/phone.jpg") no-repeat;
   height:33px;
   width:32px;
   float:left;
   
   
   }
   
  ...