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">
    <link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div class="container">
    <!-- Навигация сайта -->
	  <header class="main-header">
		  <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">
  				  <img src="img/logo-nav.png" width="138" height="70" alt="Sedona"/>
  			  </li>
  			  <li class="state-map">
  			    <a href="#" class="title-2">Карта штата</a>
  			  </li>
  			  <li class="hotels">
  			    <a href="#" class="title-2">Гостиницы</a>
  			  </li>
  			</ul>
		  </nav>
		</header>

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

CSS

@font-face {
  font-weight: normal;
  font-style: normal;

  font-family: "symbols-sedona";
  src: url("../fonts/symbols-sedona.woff") format("woff"),
       url("../fonts/symbols-sedona.woff2") format("woff2");
}

[class^="icon-"]::before,
[class*=" icon-"]::before {
  display: inline-block;
  width: 1em;
  margin-right: 0.2em;
  margin-left: 0.2em;

  font-weight: normal;
  line-height: 1em;
  font-family: "symbols-sedona";
  text-align: center;
  text-transform: none;
  text-decoration: inherit;
  font-style: normal;
  font-variant: normal;

  speak: none;
}

.icon-facebook::before { content: "\66"; } /* "f" */
.icon-twitter::before { content: "\74"; } /* "t" */
.icon-up-dir::before { content: "\25b2"; } /* "▲" */
.icon-down-dir::before { content: "\25bc"; } /* "▼" */
.icon-star::before { content: "\2605"; } /* "★" */
.icon-check-off::before { content: "\2610"; } /* "☐" */
.icon-check-on::before { content: "\2611"; } /* "☑" */
.icon-calendar::before { content: "\e800"; } /* "" */
.icon-plus::before { content: "\e801"; } /* "" */
.icon-minus::before { content: "\e802"; } /* "" */
.icon-youtube::before { content: "\f39e"; } /* "" */

/*стили страницы*/

body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 21px;
  text-transform: uppercase;
  text-align: center;
  font-family: 'PT Sans', 'Arial', sans-serif;
  font-weight: normal;
  color: #000;
  background: #f2f2f2;
}
*{
  margin: 0;
  padding: 0;
  list-style: none;
}

.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...