JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTUPE html>
<html>
<head>
	<title>Title</title>
	<meta charset="utf-8">
	<link href="styles/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<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>>
</body>
</htmml>

CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
}
.menu {
    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;
}