JSFiddle - React, Tailwind, and code Playground

by annndrewww

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style/style.css">
</head>
<body>
      <section class="header-menu">
        <div class="header-menu-wrap">
            <nav class="menu-nav">
                <ul class="menu-list">
                    <li class="menu-item"><a href="#!" class="menu-link">Парикмахерская</a></li>
                    <li class="menu-item"><a href="#!" class="menu-link">Барбершоп</a></li>
                    <li class="menu-item"><a href="#!" class="menu-link">Маникюр</a></li>
                    <li class="menu-item"><a href="#!" class="menu-link">Педикюр</a></li>
                    <li class="menu-item"><a href="#!" class="menu-link">Массаж</a></li>
                    <li class="menu-item"><a href="#!" class="menu-link">Мебель</a></li>
                </ul>
            </nav>

            <div class="menu-burger">
                <span class="menu-burger-line menu-burger-line_first"></span>
                <span class="menu-burger-line menu-burger-line_second"></span>
                <span class="menu-burger-line menu-burger-line_third"></span>
            </div>
        </div>
    </section>
</body>
</html>

CSS

.header-menu {
    border-top: 1px solid #EFEFEF;
}

.menu-burger {
    width: 40px;
    height: 28px;
    position: relative;
}

.menu-burger-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    position: absolute;
    top: 10px;
    left: 15px;

}

.menu-burger-line_first {
    top: 0;
}

.menu-burger-line_second {
    top: 50%;
    transform: translateY(-50%);
}

.menu-burger-line_third {
    bottom: 0;
}

.header-menu-wrap {
    background-color: #fff;
    padding: 30px 0;
}

.menu-list {
    display: flex;
    justify-content: center;
}

.menu-item {
    margin-right: 40px;
    transition: .2s ease;
}

.menu-item:last-child {
    margin-right: 0;
}

.menu-link {
    font-family: 'Roboto';
    font-size: 16px;
    color: #000;
    text-decoration: none;
}

.menu-item:hover, .menu-item:active, .menu-item:focus {
    transform: scale(1.1);
}