JSFiddle - React, Tailwind, and code Playground

by maxim lensky

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="MENUTESTSTYLE.css" />
    <title>TEST</title>
  </head>
  <body>
    <div id="wrapper">
      <nav class="MainMenuAll">
        <ul class="MainMenu">
          <li class="li"><a class="Menu" href="Main.html">Главная</a></li>
          <li class="li"><a class="Menu" href="Статьи.html">Статьи</a></li>
          <li class="li"><a class="Menu" href="О нас.html">О нас</a></li>
          <li class="li"><a class="Menu" href="Контакты.html">Контакты</a></li>
          <li class="li">
            <a class="Menu" href="Регистрация.html">Зарегистрироваться</a>
          </li>
        </ul>
      </nav>
    </div>
  </body>
</html>

CSS

html,body{
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0 auto;
}

.MainMenuAll {
  height: 50px;
 background: pink;
  display: block;
  margin-bottom: 10px;
}

.MainMenu {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 50px;
}
.MainMenu .li {
  float: left;
}
.MainMenuAll .MainMenu .Menu {
  color: black;
  display: block;
  height: 50px;
  padding: 0 30px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 50px;
}
.MainMenu .li .Menu :hover {
  background: #c589bb;
}