JSFiddle - React, Tailwind, and code Playground

by maxfloyd

HTML

<!DOCTYPE html>
<html lang="ru" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <title>Сборки серверов кс 1.6 от Maxfloyd</title>
  </head>
  <body>
    <div class="main">
    <div class="header">
      <div class="header-content"></div>
    </div>
    <nav role='navigation'>
        <ul class="menu">
          <li><a href="">Главная</a></li>
          <li><a href="">Сборки</a></li>
          <li><a href="">Плагины</a></li>
          <li><a href="">Услуги</a></li>
          <li><a href="">Задонатить</a></li>
        </ul>
    </nav>
    <div class="main">
      <div class="content"></div>
    </div>
    <div class="footer">
      <div class="footer-content"></div>
    </div>
    </div>
  </body>
</html>

CSS

* {
  margin: 0;
}

.row:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.row { display: inline-block; }
/* start commented backslash hack \*/
* html .row { height: 1%; }
.row { display: block; }
/* close commented backslash hack */

.header {
  margin: auto;
  width: 1000px;
  height: 100px;
  background-color: #f1f1f1;
}

nav {
  margin:auto;
  width: 1000px;
}

.menu {
  background-color: #424147;
  list-style: none;
  line-height: 50px;
}

li {
  display: inline;
}

.menu a {
  font-family: 'Roboto Condensed', sans-serif;
  color: #f1f1f1;
  padding: 15.4px 13px; /* отступ от текста */
  user-select: none;
  outline: none; /* убирать контур в Mozilla */
  text-decoration: none;
}

.menu a:hover {
  color: #424147;
  background-color: #fd6b5c;
  transition: all 0.3s ease 0s;
}