JSFiddle - React, Tailwind, and code Playground

by Yakov

HTML

<html>
<title>Страница</title>
<body>

<div class="wrapper">

  <div class="head">
    <div class="logo">
    <h2>LOGO</h2>
    </div>
  </div>
  <div class="menu">
    <a>Главная</a>
  </div>
  
  <div class="content">
  <h4>Два веселых гуся.</h4>
  
  <pre>
    Жили у бабуси
Два весёлых гуся.
Они жили-поживали,
Лапки в речке полоскали.
Один – опытный боец,
Другой – храбрый удалец.
Сказки, думаешь, конец?
Вот и нет. 
Пошли раз гуси
На базар купить бабусе
Новый шёлковый платок
И материи кусок.
Ходят гуси по базару,
Ищут нужного товару.

    
  </pre>
  </div>
  

</div>

</body>
</html>

CSS

.wrapper {
  width: 1000px;
  min-height: 500px;
  margin: 0 auto;
  background: lightgray;
  }

 .head {
   height: 100px;
   background: lightblue;
  }

.logo {
  height: 100px;
  width: 100px;
  background: lightcoral;
}

.menu {
  float: left;
  width: 200px;
  min-height: 400px;
  background: lightcyan;
}

.content {
  padding: 20px;
  float: left;
}