JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок</title>
<link rel="stylesheet" type="text/css" href="2.css">
</head>
<body>
<header>
<div id="" class="center">
  <ul>
    <li><a href="">Главная</a></li>
    <li><a href="">Список серверов</a></li>
    <li><a href="">Контакты</a></li>
    <li><a href="">Бугагашенька</a></li>
  </ul>
</div>
</div>
</header>
<footer>
Днище сайта
</footer>
</body>
</html>
<!--Атрибут "title" делает мини подсказку при наведении на текст-->
<!--Атрибут "align" выравнивает текст-->
<!--Тег "br" убирает отступы-->
<!--Тег "p" новый абзац-->
<!--Атрибут "src" задает путь к файлу-->
<!--Тег "hr" создает линии-->

CSS

*{
  margin: 1;
  padding: 0;
  outline: none;
}
.center {
  text-align: center;
}
  a {
    background: #404040;
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
    color: #FFF; /* Цвет ссылок */
    display: inline-block; /* Блочный элемент */
    padding: 20px 50px; /* Поля вокруг текста */
    border-right: solid 1px #EDE5F4;
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: ease;
  }
  a:hover {
    background: #DB073D;
  }
  li {
  color: #FFF;
  display: inline-block; /* Строчно-блочные элементы */
  background: #CA181A; /* Цвет фона */
  margin-right: -4px; /* Расстояние между пунктами меню */
  padding: 1 5px;
  }
  header {
  display: block;
  opacity: 1;
  }
  body {
    background: #8EC7D2;
  }
  footer {
    position: relative;
    text-align: center;
    font-size: 20px;
    padding-top: 750px;
  }