JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<nav>
    <ul>
        <li><a href="#" data-section="home" title="home">HOME</a></li>
        <li><a href="#" data-section="about" title="about">ABOUT</a></li>
        <li><a href="#" data-section="tech" title="technology">TECHNOLOGY</a></li>
        <li><a href="#" data-section="vision" title="vision">VISION</a></li>
        <li><a href="#" title="press" data-section="press">PRESS</a></li>                  
    </ul>
</nav>

<section id="content" class="content-wrapper">  
        <section id="home" style="width:100%; height:500px; background-color:#ff9900; display:block">
            HOME SECTION
        </section>  

        <section id="about" style="width:100%; height:500px; background-color:#ff9900;">
            ABOUT SECTION
        </section>

        <section id="tech" style="width:100%; height:500px; background-color:#ff9900;">
            TECHNOLOGY SECTION
        </section>

        <section id="vision" style="width:100%; height:500px; background-color:#ff9900;">
            VISION SECTION
        </section>

        <section id="press" style="width:100%; height:500px; background-color:#ff9900;">
            PRESS SECTION
        </section>     

</section>  <!--    CONTENT CONTAINER ENDS HERE     -->

CSS

#home, #about, #tech, #vision, #press{ display:none; }

JavaScript

$("a").on("click", function(e) {
    e.preventDefault();
    var sectionID = '#'+ $(this).data("section");
      $("#content section:visible").fadeOut();
      $(sectionID).fadeIn();
});