JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <ul>
        <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>
        <li><a href="#">Ссылка</a>
        </li>
        <li><a href="#">Ссылка</a>
        </li>
    </ul>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
}
.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu li {
    text-align: center;
    width: 14.28%;
    margin-left:0;
    margin-right: 0;
    padding:0 0;
    background: #E0EEEE;
    float: left;
    font-size: 32px;
    font-family: Calibri;
}
.menu a {
    text-decoration: none;
    color: #000;
    display: block;
}
.menu a:hover {
    background: #C1CDCD;
    transition-property: background;
    transition-duration: 0.5s;
}
.main {
    display: block;
    width: 100%;
    overflow: hidden;
}