JSFiddle - React, Tailwind, and code Playground

by tanya_22

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Sedona</title>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container clearfix">

    <!-- Навигация сайта -->
  	  <header class="main-header">

    		  <nav class="main-navigation">
      			<ul>
      			  <li><a href="#" class="title-2">Информация</a></li>
      			  <li><a href="#" class="title-2">Фото и видео</a></li>
      			  <li>
      			    <img class="logo" src="img/logo-nav.png" width="138" height="70" alt="Sedona"/>

              </li>
      			  <li><a href="#" class="title-2">Карта штата</a></li>
      			  <li><a href="#" class="title-2">Гостиницы</a></li>
      			</ul>
    		  </nav>
  		</header>
  	   <!-- Картинка и описание -->
      <main>
        <div class="index-welcome">
          <img src="img/background-index.jpg" width="1200" height="591" />
        </div>
        <div class="index-title">
          <h1 class="title-1">Седона - небольшой городок в Аризоне,
              заслуживающий большего!</h1>
          <p>
            Рассмотрим 5 причин, по которым седона круче чем гранд каньон!
          </p>
        </div>
        <!-- Причины и картинки, не уверена, нужны ли div для секций -->
        <div class="reason-item reason-img clearfix">
          <section class="reason-1">
            <h2 class="title-1">Настоящий<br> городок</h2>
            <span> - № 1 - </span>
            <p>
              Седона - не аттракцион для туристов,<br>
              там течет своя жизнь
            </p>
          </section>
          <section class="reason-pic right">
            <img src="img/pic-1.png" alt="Здесь должна быть картинка" width="800" height="256" />
          </section>
        </div>
        <div class="features clearfix">
          <section class="feature house">
            <img src="img/icon-home.png" width="75" height="72" />
            <h2 class="title-1">Жилье</h2>
            <p>
              Рекомендуем...

CSS

body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 21px;
  text-transform: uppercase;
  text-align: center;
  font-family: "PTSans", "Arial", "sans-serif";
  font-weight: normal;
  color: #000;
  background: #f2f2f2;
}

.title-1 {
  font-size: 21px;
  line-height: 26px;
  font-weight: bold;
  margin: 0;
}

.title-2 {
  font-size: 14px;
  line-height: 21px;
  font-weight: bold;
}

.title-3 {
  font-size: 30x;
  line-height: 26px;
  font-weight: bold;
}

.title-4 {
  font-size: 14px;
  line-height: 21px;
  font-weight: bold;
}

.title-5 {
  font-size: 12px;
  line-height: 18px;
}

.clearfix{
  content: '';
  display: table;
  clear: both;
}

.container{
  width: 1200px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,1,1,0.2);
}
.main-navigation ul{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.main-navigation li {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  font-weight: bold;
  font-size: 14px;
  background-color: #fff;
}
.main-navigation li:nth-of-type(3){
  height: 56px;
}
.main-navigation a{
  display: block;
  height: 56px;
  vertical-align: top;
  text-decoration: none;
  line-height: 54px;
  color: #000;
}
img.logo{
  position: relative;
}
.index-title{
  width: 576px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 39px;
}
.index-title > p{
  padding-top: 16px;
}
.reason-1{
  float:left;
  width: 400px;
  padding-top: 55px;
  padding-bottom: 58px;
  background: #81b3d2;
}
.reason-pic{
  float:left;
  width: 800px;
}
.feature{
  float: left;
  width: 33%;
}