JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="logo">
    ООО &laquo;Агросервис&raquo;
</h2>
<nav class="menu">
    <ul>
        <li><a href="">Главная</a></li>
        <li><a href="">Продукты</a></li>
        <li><a href="">О нас</a></li>
        <li><a href="">Контакты</a></li>
    </ul>
</nav>
<article>
    Мы являемся лидирующей компанией в нашей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нашего роста не имеет ни границ, ни пределов. Сопротивление бесполезно.
</article>
<div class="clear-dummy">helloworld</div>

CSS

body {
    margin: 10px;
    font-size: 14px;
    line-height: 1.5;
    font-family: "Trebuchet MS";
}
.logo {
    font-weight: normal;
    color: #2f3f77;
    margin: 10px 0;
}
.menu {
    float: left;
    width: 200px;
    /*background-color: yellow;*/
}
.menu li {
    list-style-type: none;
}
.menu ul {
    color: #4b6fca;
    margin: 0;
    padding: 0;
    /**
     * По умолчанию
     * margin-before: 1em;
     * padding-start: 40px;
     * http://www.w3.org/TR/html-markup/ul.html
     * Как этого стандарта придерживаются браузеры, не знаю.
     */
}
.menu a:link,
.menu a:visited,
.menu a:active {
    color: inherit;
}
article {
    margin-left: 210px;
    /*background-color: lime;*/
}
.clear-dummy {
    clear: both;
    /**
     * Тут должен начаться педантичный холивар,
     * какой способ лучше использовать: паддинги,
     * overflow или clear.
     */
}