JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="blick">
<!-- Удаляем картину отсюда -->
</div>  
<div class="wrap">
    <div id="left">
    <h1><span>xoff</span>ka</h1>
    <div id="hr"></div>
    <ul class="list">
        <li class="item">
            <a href="/uslugi.html" class="link">Услуги</a>
            <div class="text">Список предоставляемых услуг и прайс лист.</div>
        </li>
        <li class="item">
            <a href="/info.html" class="link">Информация</a>
            <div class="text">Информация о сайте и контактные данные для связи с администрацией сайта.</div>
        </li>
        <li class="item">
            <a href="/reklama.html" class="link">Реклама</a>
            <div class="text">Вся информация для сотрудничества.</div>
        </li>
    </ul>
    </div>
    <div id="hr"></div>

    <div class="content">
<p>
Текст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесьТекст здесь
</p>
    </div>
</div>
</div>
</body>

CSS

body
{
    background: #e0e0e0; /* вначале задаётся фон для всей страницы */
    margin: 40px auto; /* это отсупает сверху сорок пикселей и центрирует по горизонтали. маргины отступают от родительского блока, т.е. от блока, в котором находится данный эл-т. некоторые делают внутри body какой-нибудь див и приписывают это ему, потому что body - корневой элемент страницы. но корневой эл-т это html, посему отступы спокойно можно давать body. */
    width:800px; /* чтобы маргины работали, обязательно нужно указывать ширину блока. можете поставить себе любую. */
}
a, a:active, a:focus, a:link, a:visited
{
    color:#000; /* чтобы ссылки в меню без наведения всегда были чёрными, стиль применяется не только к тегу а, но и ко всем его состояниям */
}

a.link {
text-decoration: none;
}

a:hover
{
    color: blue; /* цвет при наведении на ссылку меняется */
}
#left
{
    width:100px; /* задаётся ширина левого блока с меню */
}
h1
{
    font: 200% Myriad Pro; /* не знаю, какой у вас там шрифт, не умею зрительно определять. */
    color:#fff; /* белый шрифт заголовка */
    text-shadow: 0 0 10px #666, 0 0 2px #666; /* тень заголовка */
    margin: 0px 5px; /* отступы */
}
h1 span
{
    font-weight:bold; /* внутри заголовка толщина шрифта разная, поэтому в заголовок внедрён - текстовый, грубо говоря, эл-т. для него применяется жирный шрифт. */
}
#hr
{ /* имитируем линию. это можно сделать любым блочным эл-том, но я люблю дивы */
    width:100%; /* ширина блока = 100% ширины блока родителя */
    height:1px; /* высота блока - один пиксель, как будто просто горизонтальная линия */
    background: #fff; /* цвет этой "линии" */
    box-shadow: 0px 0px 10px #666, 0 0 2px #ccc; /* тень */
    -moz-box-shadow: 0px 0px 10px #666, 0 0 2px #ccc; /* так как просто box-shadow не работает во всех браузерах, используются суффиксы для браузеров. этот для мозиллы */
    -webkit-box-shadow: 0px 0px 10px #666, 0 0 2px #ccc; /* а этот для хрома */
}
ul
{
    list-style: circle inside; /* задаются...