JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <nav> <img class="nav_bar" src="images/navigation_stick.png">
            <ul class="subsection">

                <li class="subsection"><a class="none" href="#none">Animation</a>
                         <a href="#project" class="subsection project">Project</a>
                </li>

                <li>
                    <h2>Animation</h2>
                    <p>We have created a world-class</p>
                </li>
            </ul>
        </nav>

<section id="project">
        <div class="container">
            <div>
                    <div class="list">
                        <img class="back" src="images/.jpg">
                        <article class="details">
                            <h2 class="details">Windows Civilization</h2>
                            <p class="details">A projection of civilization</p>
                            <a href="" class="button"><span class="butt">See Project</span></a>
                        </article>
                    </div>
            </div>
        </div>
    </section>
    
</body>

CSS

li a:focus, li a.active{
        padding-top: 5px;
        max-height: 50px;
        opacity: 1;
        color:red;
    }

#project{
opacity: 0;
transition: opacity 0.5s ease;
}

#project:target{
    opacity: 1;
}

JavaScript

$('nav a').click(function(){
	if ($(this).hasClass('project')) {
  	$(this).addClass('active');
  } else {
  	$('.project').removeClass('active');
  }
});