JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<nav class="bot__menu">
    <a class="bot__menu__a" href="#">главная</a>
    <a class="bot__menu__a" href="#">о компании</a>
    <a class="bot__menu__a" href="#">очкарик</a>
    <a class="bot__menu__a" href="#">магазин</a>
    <a class="bot__menu__a" href="#">контакты</a>
</nav>

CSS

body, html { width: 100%; height: 100%; }

body {
    background: #003554;
    position: relative;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.bot__menu {
    position: absolute;
    text-align: center;
    bottom: 0px;
    left: 50%;
    margin-left: -350px;
    background: #c8cccf;
    width: 800px;
    height: 70px;
    border-top: 4px solid #fff;
    border-top-left-radius: 40%;
    border-top-right-radius: 40%;
    overflow: hidden;
    box-shadow: 0px 0px 10px 0px #fff, inset 0px 0px 3px 0px #333;
}

.bot__menu__a {
    display: inline-block;
    vertical-align: middle;
    padding: 0px 20px;
    text-transform: uppercase;
    text-decoration: none;
    height: 70px;
    line-height: 75px;
    color: #111;
}

.bot__menu__a:hover {
    background: #35363a; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #35363a 34%, #35363a 34%, #191b1f 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(34%,#35363a), color-stop(34%,#35363a), color-stop(100%,#191b1f)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #35363a 34%,#35363a 34%,#191b1f 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #35363a 34%,#35363a 34%,#191b1f 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #35363a 34%,#35363a 34%,#191b1f 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #35363a 34%,#35363a 34%,#191b1f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35363a', endColorstr='#191b1f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: #fff;
}