JSFiddle - React, Tailwind, and code Playground

by tanya_22

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Барбершоп «Бородинский»</title>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <header class="main-header">
      <div class="container clearfix">
        <nav class="main-navigation">
          <ul>
            <li><a href="#" class="white">Информация</a></li>
            <li><a href="#" class="white">Новости</a></li>
            <li><a href="#" class="white">Прайс-лист</a></li>
            <li><a href="#" class="white">Магазин</a></li>
            <li><a href="#" class="white">Контакты</a></li>
          </ul>
        </nav>
        <div class="user-block">
          <img src="img/icon-login.png" width="18" height="16" />
          <a class="login white" href="#">Вход</a>
        </div>
      </div>
    </header>

    <main class="container">
      <div class="index-logo">
        <img src="img/index-logo.png" width="368" height="204" alt="Барбершоп «Бородинский»">
      </div>
      <!-- Скрытая форма входа в личный кабинет -->
      <div class="hidden-login show-login">
        <form>
          <fieldset class="login-form">
            <legend class="title-1">Личный кабинет</legend>
            <p>Введите, пожалуйста, свой логин и пароль</p>
            <input type="text" name="login" id="login" placeholder="Логин">
            <img src="img/icon-user.png" width="15" height="15" />
            <input type="text" name="password" id="password" placeholder="Пароль">
            <img src="img/icon-lock.png" width="15" height="17" />
            <input type="checkbox" name="remember_me" id="remember_me" checked>
            <a href="#" class="restore">Я забыл пароль</a>
            <input type="button" name="comein" value="Войти">
          </fieldset>
        </form>
      </div>

      <section class="features clearfix">
        <div class="features-item">
          <h2 class="features-name title-1 white">Быстро</h2>
          <p class="white">Мы делаем свою...

CSS

body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 24px;
  color: black;
  font-weight: bold;
  font-family: "PT Sans Narrow";
  background: url("../img/background-index.jpg") no-repeat  #070707 ;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.hidden-login,
.hidden-map {
  display: none;
}

.main-header {
  width: 100%;
  margin-bottom: 60px;
  background: #000000;
}
.main-navigation > ul > li{
  display: inline;
}

.container {
  width: 940px;
  margin: 0 auto;
  padding: 0 10px;
}

.main-navigation{
  float: left;
  width: 780px;
}

.user-block{
  float: right;
  width: 140px;
}

.index-logo{
  width: 368px;
  min-height: 204px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}

.features {
  margin-bottom: 80px;
}

.features-item{
  float: left;
  width: 300px;
  margin-right: 20px;
}

.features-item:last-child{
  margin-right: 0;
}

.index-content{
  margin-bottom: 35px;
  padding: 50px 80px;
  background: url("../img/background-2.png");
}

.index-content-left{
  float: left;
  width: 380px;
}

.index-content-right{
  float: right;
  width: 300px;
}

.main-footer{
  margin-top: 65px;
  padding-top: 60px;
  padding-bottom: 40px;
  background: url("../img/footer.png");
}

.footer-contacts{
  float: left;
  width: 320px;
  margin-right: 60px;
}

.footer-social{
  float: left;
  width: 180px;
}

.footer-copyright{
  float: right;
  width: 180px; /*почему 180px, ведь, там явно 160пх*/
}

.hidden-login,
.hidden-map{
  display: none;
}

.title {
  font-size: 48px;
  line-height: 48px;
  color: black;
  font-weight: bold;
  font-family: "PT Sans Narrow";
}

.title-1 {
  font-size: 30px;
  line-height: 42px;
  color: black;
  font-weight: bold;
  font-family: "PT Sans Narrow";
}

.title-2 {
  font-size: 24px;
  line-height: 30px;
  color: black;
  font-weight: bold;
  font-family: "PT Sans Narrow";
}

.category,
.firm {
  line-height: 18px;
}

.white {
  color: white;
}
.gray {
  color: gray;
}