JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<h1>Красивое CSS меню для сайта</h1>
<ul>
    <li><a data-text='ZORNET.RU' href="#">ZORNET.RU</a></li>
    <li><a data-text="Скрипты HTML" href="#">Скрипты HTML</a></li>
    <li><a data-text="Шаблоны" href="#">Шаблоны</a></li>
    <li><a data-text="Дизайн" href="#">Дизайн</a></li>
</ul>

CSS

*{ margin:0; padding:0; }

body{ text-align:center; padding:20px 0; }

 h1 {
    font-size: 1.8em;
    color: #585555;
    margin-bottom: 50px;
    letter-spacing: -1px;
    text-transform: capitalize;
    text-shadow: 0 2px 2px rgba(140, 140, 140, 0.6);
}                                           





ul {
    background-color: rgba(27, 25, 25, 0.3);
    border-bottom: 1px solid rgba(239, 232, 232, 0.31);
    box-shadow: 0 0 7px rgba(16, 16, 16, 0.46) inset;
    border-radius: 17px;
    margin: 0;
    padding: 0 30px;
}
ul {
    display: inline-block;
    text-align: center;
    height: 49px;
    overflow: hidden;
    background: #173461;
    border: 2px solid #295ec1;
}
ul li a {
    letter-spacing: -1px;
    text-decoration: none;
    text-transform: uppercase;
    color: #f7f1f1;
}
ul li {
    float: left;
    height: 100%;
    list-style: none;
    margin: 0 23px;
}
ul li * {
    display: inline-block;
    font-size: 1.3em;
    line-height: 49px;
}
ul li a{ margin-top:-49px; transition:0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4); }
ul li a:hover{ margin-top:0; }
ul li a:before{ content:attr(data-text); display:block; color:#eae63d; }