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 class="info">
    			    <a href="#" class="title-2">Информация</a>
    			  </li>
    			  <li class="media">
    			    <a href="#" class="title-2">Фото и видео</a>
    			  </li>
    			  <li class="logo">
    			    <a href="#">
    				  <img src="img/logo-nav.png" width="138" height="70" alt="Sedona"/>
    				  </a>
    			  </li>
    			  <li class="state-map">
    			    <a href="#" class="title-2">Карта штата</a>
    			  </li>
    			  <li class="hotels">
    			    <a href="#" class="title-2">Гостиницы</a>
    			  </li>
    			</ul>
  		  </nav>
      </div>
		</header>

    <main class="container">
      <!-- Блок с фильтрами по поиску -->
      <div class="accommodation-filter">
        <form>
          <!-- Фильтр по инфраструктуре -->
          <fieldset class="infrastructure">
            <legend class="title-4 white">Инфраструктура:</legend>
              <input type="checkbox" name="structure" id="pool" checked>
              <label for="pool" class="white">Бассейн</label>
              <input type="checkbox" name="structure" id="parking">
              <label for="parking" class="white">Парковка</label>
              <input type="checkbox" name="structure" id="internet">
              <label for="internet" class="white">WI-FI</label>
          </fieldset>
          <!-- Фильтр по типу жилья -->
          <fieldset class="housing">
            <legend class="title-4 white">Тип жилья:</legend>
              <input type="checkbox" name="house" id="hotel" checked>
              <label for="hotel" class="white">Гостиница</label>
              <input type="checkbox" name="house" id="motel" checked>
              <label for="motel"...

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;
}
/*
размер шрифта,
высоту строки,
цвет шрифта,
жирность шрифта,
гарнитуру (название шрифта).