JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple webpage</title>
    <link type="stylesheet" href="style.css">
  </head>
  <body>
        <div class="wrapper">
    <header class="main-header">
        <nav class="main-navigation">
        <ul>
          <li>
            <a href="#">Информация</a>
          </li>
           <li>
            <a href="#">Лента</a>
          </li>
           <li>
            <a href="#">Темы</a>
          </li>
           <li>
            <a href="#">Подборки</a>
          </li>
        </ul>
      </nav>
    </header>
  <main class="container clearfix">
    <div class="columns column-1">
      Здесь будет всякого рода меню
    </div>
     <div class="columns column-2">
       Здесь будет очень много текста. Например, такого фрыаоыраоывраоырвоалырвопрывоароывраоывраоывраоывраоырвоарывоароылвраоывроарывлоарыовлравыралоыравлоы
    </div>
     <div class="columns column-3">
       А тут тоже будут ссылки
    </div>
          </main>
      <footer class="main-footer clearfix">
        <div class="footer-content">
          А тут будут ссылки а-ля как нас найти
        </div>
         <div class="footer-content">
         Тут будет #хэштег а-ля какие мы пиздатые
        </div>
         <div class="footer-content">
          А тут будет автор этого позорища
        </div>
         </footer>
    </div>
      </body>
</html>

CSS

body {
  font-family: "PT Sans", "Arial", sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: bold;
  text-transform: uppercase;
}

header {
  background-color: #e5e5e5;
}

.wrapper {
  width: 500px;
  margin: 0 auto;
  border: 2px solid black;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.main-navigation a {
  text-decoration: none;
  display: block;
  padding: 5px;
  font-size: 14px;
  color: #000000;
  text-align: center;
}

.main-navigation li {
  display: inline-block;
  border-right: 2px solid black;
  width: 25%;
  border-bottom: 2px solid black;
  box-sizing: border-box;
}

.main-navigation li:last-child {
  border-right: none;
}

.columns {
  float: left;
  min-height: 300px;
  text-align: center;
  border-right: 2px solid black;
  box-sizing: border-box;
  background-color: lightcyan;
  padding-top: 20px;
}

.column-1,
.column-3 {
  width: 25%;
}

.column-2 {
  width: 50%;
  word-wrap: break-word;
}

.column-3 {
  border-right: none;
}

.main-footer {
  background-color: #000000;
  color: #ffffff;
}

.footer-content {
  float: left;
  min-height: 100px;
  width: 30%;
  padding: 20px 20px;
  box-sizing: border-box;
  text-align: center;
}

.footer-content:nth-child(2) {
width: 40%;
}