JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="/css/hosts.css">
</head>
<body>
  <header>


      <div class="box clearfix">

          <nav>
            <ul class="menu">
              <li>
                <a href="#">Главная</a>
              </li>
              <li>
                <a href="#">Новости</a>
              </li>
              <li>
                <a href="#">О нас</a>
              </li>
              <li>
                <a href="#">Контакты</a>
              </li>
            </ul>
          </nav>
          <img src="/images/tree.png" alt="логотип" class="logo">
          </div>
          <div class="titles">
            Добро пожаловать
            <h1>Nature Selection<h1>
          </div>

        </div>
      </div>
      </header>
<section>
      <div class="box clearfix">
        <div class="company">
        <p>Наша компания на протяжении многих лет занимается производством
        крема из экологически чистых материалов. Мы предосталвяем широкий
        ассортимент кремов для разных целей. Именно нас на протяжении многих
        лет выбирают покупатели, потому что хотят получать результат,
        а не просто выкидывать деньги на ветер.</p>
      </div>
      <div class="company">
        <p>В наших кремах испольщуются только природные и экогологически чистые
        материалы, включая фрукты вроде кокоса или сладких личи.
        Использование подобных материалов помогает поддерживать кожу
        в здоровом виде и не допускать ее высыхания, в том числе это
        благоприятно сказывается на лечении разных кожаных болезней
        и дерматологии.</p>
      </div>

      <img src="/images/crem.png" alt="Крем фото" class="photo">

      <div class="company">
        Эмульсионные кремы бывают двух типов – масло-вода и вода-масло.
        В первом случае эмульсия имеет жидкую консистенцию и используется
        для изготовления дневных увлажняющих кремов. Благодаря высокому
       ...

CSS

body {
  padding: 0;
  margin: 0;
  font-family: verdana, sans-serif;
  background: url(/images/bg-dark2.png) center top;
  color:  white;
}

.clearfix:after {
  content: '';
  display: table;
  width: 100%;
  clear: both;
}

header {

  height: 600px;
}

.box {
  width: 1000px;
  margin: 0 auto;
}
.menu {
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  margin-top: 50px;
}
.menu li {
  float:left;
  display: block;
  padding: 10px;

}

.menu li a {
  text-decoration: none;
  color: #FFF;
  padding: 10px;

}

.menu li a:hover {
  background-color: #7ee35e;

}

nav {
  float:left;
}

.logo {
  width: 300px;
  height: 250px;
  float: right;
}

.titles {
  font-size: 24px;
  text-align: center;
  text-transform: uppercase;
  color: #FFF;

}

.company {
  width: 450px;
  text-align: justify;
  float: left;
  font-size: 20px;
}

.company:nth-child(2) {
  width: 450px;
  text-align: justify;
  float: right;
  margin-top: 250px;
}

.company:last-child {
  float:left;
  width: 450px;
  clear: left;
}

.photo {
  float: left;
  width: 400px;
  height: 400px;
}

.photo:last-child {
  float: right;

}