JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
        <div id="header">
                <img src="img/header.jpg" width="900" height="138" /><!-- Рисунок шапка -->
        </div><!-- #header-->
                <div id="middle">
                        <div id="container">
                                <div class="sidebar" id="sideLeft">
                                        <h1>СОДЕРЖАНИЕ</h1><!-- Содержание меню -->
                                                <ul><!-- Меню начало -->
                                                <li><a href="1.html">01.</a></li>
                                                <li><a href="2.html">02.</a></li>
                                                <li><a href="3.html">03.</a></li>
                                                <li><a href="4.html">04.</a></li>
                                                <li><a href="5.html">05.</a></li>
                                                <li><a href="6. html " class="notopbrdr0xNone">06.</a></li></ul><!
-- Меню конец -->
                                </div><!-- .sidebar#sideLeft -->
                                        <div id="content">
                                                <h1>ЗАГАЛОВОК</h1><!-- Заголовок текста -->
                                                        <div id="target" style="overflow:  auto; height: 860px;"><!-- Текст и рисунки с прокруткой -->
                                                                <p><img src="img/1/IMG_01.jpg" width="570" height="428" />
                                                                <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                                                                <p><img src="img/1/IMG_01.jpg" width="570" height="428" />
                                                                <p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
                                                        </div id><!-- #target--><!-- Конец текста и рисунков с...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
:focus {
        outline: 0;
}
ins {
        text-decoration: none;
}
del {
        text-decoration: line-through;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}
body {
        font: 12px Verdana, sans-serif;
        width: 100%;
    background-color: #f7f5e3;
    color: #17181A;
}
a {
        color: blue;
        outline: none;
        text-decoration: underline;
}
a:hover {
        text-decoration: none;
}
p {
        margin: 0 0 18px
}
img {
        border: none;
}
input {
        vertical-align: middle;
}

#start {
    width: 409px;
    height: 499px;
    margin: 25px auto;
}
#start a {
    border: none;
}

#start p {
    text-align: center;
    font-family: Verdana;
    font-size: 11px;
    color:#333;
}

#wrapper {
        width: 900px;
        margin: 0 auto;
    border: 1px solid #EDE4A3;
    background-color: #fff;
}


/* Header
—————————————————————————--*/
#header {
        height: 138px;
        background: #FFE680;
}


/* Middle
—————————————————————————--*/
#middle {
        width: 100%;
        height: 1%;
        position: relative;
}
#middle:after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
}
#container {
        width: 100%;
        float: left;
        overflow: hidden;
    
}


#content {
        margin-left: 270px;
        padding-top: 0;
        padding-right:...