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>
    <!-- Навигация сайта -->
	  <header class="main-header">
      <div class="container">
  		  <nav class="main-navigation">
    			<ul>
    			  <li><a href="#" class="title-2">Информация</a></li>
    			  <li><a href="#" class="title-2">Фото и видео</a></li>
    			  <li>
    			    <a href="#home">
    				  <img src="img/logo-nav.png" width="138" height="70" alt="Sedona"/>
              </a>
            </li>
    			  <li><a href="#" class="title-2">Карта штата</a></li>
    			  <li><a href="#" class="title-2">Гостиницы</a></li>
    			</ul>
  		  </nav>
      </div>
		</header>
	   <!-- Картинка и описание -->
    <main class="container">
      <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">
        <section class="reason-1">
          <b class="title-1 white">Настоящий городок</b>
          <span class="white"> - № 1 - </span>
          <p class="white">
            Седона - не аттракцион для туристов,
            там течет своя жизнь
          </p>
        </section>
        <section class="reason-pic right">
          <img src="img/pic-1.png" alt="Здесь должна быть картинка" width="800" height="256" />
        </section>
      </div>
      <div class="advantages">
        <section class="house">
          <img src="img/icon-home.png" width="75" height="72" />
          <b class="title-1">Жилье</b>
          <p>
            Рекомендуем пожить в настоящем
           ...

CSS

body {
  font-size: 14px;
  line-height: 21px;
  color: black;
  font-weight: normal;
  font-family: "PTSans", "Arial", "sans-serif";
}

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

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

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

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

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

.white {
  color: white;
}
/*
размер шрифта,
высоту строки,
цвет шрифта,
жирность шрифта,
гарнитуру (название шрифта).