JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<nav id="mainnav">
    <ul>
        <li><a href="#about">О НАС</a>
        <li class="active_section"><a href="#concept">О ПРИНЦИПАХ</a>
        <li><a href="#technology">О ТЕХНОЛОГИЯХ</a>
    </ul>
</nav>

CSS

#mainnav ul {
    position: relative;
    left: 30px;
    padding-top: 30px !important;
    list-style: none;
    font-weight: 600;
    font-weight: 600;
    font-size: 30px;
    font-family: "Open Sans", sans-serif;
}

#mainnav ul li {line-height: 24px;}

#mainnav ul li a{
    color: #ee8157;
    text-decoration: none;
}

.active_section a {
    opacity:0.3;
    filter: alpha(opacity: 30);
    -moz-opacity: 0.3;
}
.active_section a:hover {
    font-size: inherit !important;
    line-height: inherit !important;
}

JavaScript

$('#mainnav ul li:not(.active_section) a').hover(function() {
            $(this).stop().animate({fontSize:"40px"},100);
        },function() {
            $(this).stop().animate({fontSize:"30px"},100);
        });