JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
        $(document).ready(function(){    
            $("#slider").easySlider({
                auto: true, 
                continuous: true
            });
        });    
</script>
</head>
<body>

    <div class="wrapper">
        <div class="header">
            <div class="h-logo">
               
            </div>
            <div class="h-slide">                     
                <div id="slider">
                <ul>                
                    <li><a href="#"><img src="img/slide.png"></a></li>
                    <li><a href="#"><img src="img/slide.png"></a></li>    
                    <li><a href="#"><img src="img/slide.png"></a></li>
                </ul>
            </div>
                
            
            </div>
        </div>
        <div class="main">
            <div class="sidebar">
        <div class="menu-block-h"></div>
                <ul class="menu">
                    <li><a href="#" class="m-main">Главная</a></li>
                    <li><a href="#">Наши работы</a></li>
                    <li><a href="#">Прайс лист</a></li>
                    <li><a href="#">Контакты</a></li>
                    <li><a href="#">Вакансии</a></li>
                    <li><a href="#" class="m-main">Главная</a></li>
                    <li><a href="#">Наши работы</a></li>
                    <li><a href="#">Прайс лист</a></li>
                    <li><a href="#">Контакты</a></li>
                    <li><a href="#">Вакансии</a></li>
                </ul>
        <div class="menu-block-f"></div>
                
        <div class="menu-block-h"></div>
        <div class="menu2">
                Наши исследования позволяют сделать...

CSS

/*start reset css*/
html, body, div, span, applet, object, iframe,
h1, h2, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
 u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption, tbody, tfoot, thead, th, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

html, body {
    line-height: 1;
    background: #666666;
    font-family: arial;
    height: 100%;
}
h3 {margin:0; padding:0; color: #224D79;}
.err {color: #3578BB; margin: 0 0 25px 0;}
/*end reset css*/

.wrapper {
    width: 900px;
    margin: 0 auto;
    position: relative;
    min-height: 100%;
}
.header {
    margin: 50px 0 0 0;
    background: url(../images/header-bg.png) repeat-x;
    height: 200px;
    position: relative;
}
.h-logo {
    background: url(../images/h-logo.png) no-repeat;
    height: 219px;
    width: 298px;
    position: absolute;
    top: -54px;
    left: 10px;
    text-align: center;
    padding: 40px 0 0 0;    
}
.h-logo h1 {
    width: 160px;
    margin: 0 0 0 65px;
}
.h-logo h1 a {
    font-size: 28px;
    text-decoration: none;
    color: #ffffff;
    line-height: 35px;
    margin: 30px 0 0 0;
    letter-spacing: -2px;
    
}
.fort {
    font-size: 46px;
    color: #ffffff;
    font-weight: bold;
    line-height: 35px;
}
.description {
    color: #B5D9F7;
    font-size: 13px;
    font-weight: bold;
    margin: 10px 0 0 45px;
    width: 200px;
    
}
.number {
    color: #D4D7D9;
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0 0 0;
}
.h-slide {
    float: right;
    height: 200px;
    margin: 15px 20px 0 0;
   ...