JSFiddle - React, Tailwind, and code Playground

by ProJey

HTML

<body>
    
    <div class="body-of-site">
        <div class="top-over-menu">
            <div class="top-over-menu-logo">
            </div>
        </div><div class="main-menu">
        <ul>
                <li><a href="#">Главная</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="#">Контакты</a></li>
            </ul>
        </div>
        <div class="main-body-block">
            <h1>Бессмысленный заголовок</h1>
            <p>Тестовое предложение, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым. Тестовое предложение, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым. <a href="#">Тестовое предложение</a>, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым.</p>
            <h1>Бессмысленный заголовок</h1>
            <p>Тестовое предложение, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым. Тестовое предложение, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым. <a href="#">Тестовое предложение</a>, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым.</p>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <p>Тестовое предложение, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым. Тестовое предложение, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым. <a href="#">Тестовое предложение</a>, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым.</p>   
            <h1>Бессмысленный заголовок</h1>
            <p>Тестовое предложение, которое служит для наполнения шаблона сайта совершенно бессмысленным содержимым....

CSS

html, body
    {
      height: 100%;
      padding: 0px;
      margin: 0px;
    }
.body-of-site{
    width: 730px;
    min-height: 100%;
    margin: 0 auto; 
    background-color: yellow;
    clear: both;
 
}
.top-over-menu{
    width: auto;
    height: 100px;
    background-color: chocolate;
}

.main-menu{
    background-color: bisque;
}
.main-menu li{
    display: inline-block;
    font-size: 10px;
    margin-right: 5px;
    vertical-align: top;    
}

.main-body-block{
    padding: 10px;
    padding-left: 20px;
    width: 68%;
    height: auto;
    margin-top: 20px;
    background-color: darkgrey;
    float: left;
    border-top-right-radius: 15px;
    min-height: 100%;
}

.main-body-block:after{
  display: table;
  content:"";
  clear:both;
}

h1{
    margin-bottom: 20px;
}

p{
    margin-bottom: 15px;
}

ul{
    margin-bottom: 15px;
}

.right-body-block{
    padding: 10px;
    padding-left: 20px;
    width: 20%;
    margin-top: 20px;
    background-color: darkgrey;
    float: right;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    min-height: 100%;
}