JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<header>

  <div class="bg-nav">

    <ul class="nav">
      <li><a href="#" class="current">Главная</a></li>
      <li><a href="#">Программа</a></li>
      <li><a href="#">Условия</a></li>
      <li><a href="#">Участие и регистрация</a></li>
      <li><a href="#">Отзывы</a></li>
      <li><a href="#">Гарантия</a></li>
      <li><a href="#" id="clear-last">Кто ведет</a></li>
    </ul>

  </div>

  <div class="logo">
    <a href="#"><img src="images/logo.png"></a>
  </div>

</header>

<main class="main">
  <div class="baner">
    <div class="baner-text">
      <h1>Бизнес-Эксперт</h1>
      <h3>(Курсы для руководителей, консультантов,<br> коучей, тренеров и лидеров)</h3>
      <p>Обучение, которое позволит вашему<br> бизнесу развиваться и расти.</p>
    </div>

    <div class="baner-video">
      <div class="video">
        <iframe width="580" height="330" src="https://www.youtube.com/embed/DyHR1bWqX14" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>
  </div>

  <div class="content-box">

    <div class="content">
      <h2>The Twenty One Pilots Universe</h2>
      <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах,
        которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам
        "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно.</p>

      <div class="line"></div>

      <ul>
        <li>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает...

CSS

body {
  position: relative;
  margin: 0;
  padding: 0;
  color: #000;
  font: normal 14px/19px Helvetica, Arial, sans-serif;
  background: #fff;
}

.clear {
  clear: both;
}

p {
  margin: 0;
  padding: 10px 0;
}

a {
  color: #1200ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a img {
  border: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: #000;
}

h1 {
  padding: 40px 0 24px;
  font-size: 36px;
  line-height: 1.4em;
}

h2 {
  padding: 24px 0 12px;
  font-size: 27px;
  line-height: 1.4em;
}

h3 {
  padding: 24px 0 12px;
}

ol,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}