JSFiddle - React, Tailwind, and code Playground
HTML
<header>
<h3>ООО «Агросервис»</h3>
</header>
<main>
<nav>
<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>
</main>
CSS
body {
padding: 0px;
margin: 0px;
font-family: "Trebuchet MS";
}
header {
margin: 0px;
margin-left: 10px;
}
header h3 {
margin-top: 10px;
margin-bottom: 10px;
}
nav {
margin-left: 10px;
float: left;
width: 200px;
margin-right: 10px;
}
nav ul {
padding-left: 0px;
margin-top: 0px;
}
nav ul li {
list-style: none;
}
article {
text-align: left;
margin-right: 10px;
}