JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
	<h1>OOO "Агросервис"</h1>
</div>

<div id="main">
	<ul>
		<li><a href="">Главная страница с информацией</a></li>
		<li><a href="">Продукты</a></li>
		<li><a href="">О нас</a></li>
		<li><a href="">Контакты</a></li>
	</ul>
	<div id="content">
		<p>Мы являемся лидирующей компанией в нашей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нагего роста не имеет ни границ,
            ни пределов. Сопротивление бесполезно.</p>
        
		<p>Мы являемся лидирующей компанией в нашей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нагего роста не имеет ни границ,
            ни пределов. Сопротивление бесполезно.</p>

		<p>Мы являемся лидирующей компанией в нашей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нагего роста не имеет ни границ,
            ни пределов. Сопротивление бесполезно.</p>

		<p>Мы являемся лидирующей компанией в нашей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нагего роста не имеет ни границ,
            ни пределов. Сопротивление бесполезно.</p>

		<p>Мы являемся лидирующей компанией в нашей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нагего роста не имеет ни границ,
            ни пределов. Сопротивление бесполезно.</p>

		<p>Мы являемся лидирующей компанией в нашей отрасли! Мы на голову обходим всех наших конкурентов. Динамика нагего роста не имеет ни границ,
            ни пределов. Сопротивление бесполезно.</p>        
    </div>	
    
</div>

CSS

body{
	font-family: 'Trebuchet MS';
}
#header{
	
	color:#2f3f77;
	padding-bottom: 0px;
	margin: 10px;
	

}
#header h1{
	margin: 0px;
}
#main{
	margin: 10px;
	text-align: left;
	padding: 0px;
}
ul{
	list-style-type: none;
	padding:0px;
	margin: 0px;
	float: left;
	width: 200px;
    height:900px;
	
	

}
li{
    margin-bottom:10px;
}


a{
	color:blue;
}