JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <!-- Шапка сайта -->
  <header>
    <div>
      <!-- Логотип -->
      <a href="/"></a>
      <!-- Верхняя навигация -->
      <nav>
        <ul>
          <li><a href="*">Каталог</a></li>
          <li><a href="*">Новости</a></li>
          <li><a href="*">Обзоры</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="wrp">
    <!-- Левая колонка "Боковая навигация категорий" -->
    <nav>
      <ul>
        <li><a href="">категория 1</a></li>
        <li><a href="">категория 2</a></li>
        <li><a href="">категория 3</a></li>
      </ul>
    </nav>
    <!-- Правая колонка для контента -->
    <main>
      <!-- Контент -->
    </main>
  </div>
  <!-- Нижняя часть шаблона -->
  <footer></footer>
</body>

CSS

header {
  position: fixed;
  width: 100%;
  background-color: #fed853;
}
header div {
  max-width: 400px;
  height: 60px;
  display: flex;
  width: 100%;
  margin: 0 auto;
}
header ul {
  list-style: none;
}
header ul li {
  float: left;
  margin-right:10px;
}
.wrp {
  margin: 0 auto;
  background-color: #57dd82;
  max-width: 400px;
  width: 100%;
  height: 300px;
}
.wrp nav {
  float:left;
  width: 150px;
  height: 150px;
  background-color: #b2cdf1;
  margin-top: 60px;
}