JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<ul>
    <li id="home"><a href="#">Home</a>

    </li>
    <li id="about"><a href="#">About</a>

    </li>
    <li id="products"><a href="#">Products</a>

    </li>
    <li id="services"><a href="#">Services</a>

    </li>
    <li id="contact"><a href="#">Contact us</a>

    </li>
</ul>
<div id="mainMan">
    <div id="newdiv" style=" background-color:red;"></div>
    <div id="newdiv1" style="background-color:blue;"></div>
    <div id="newdiv2" style="background-color:yellow;"></div>
    <div id="newdiv3" style="background-color:green;"></div>
</div>

CSS

#mainMan > div {
    height:400px;
    width:700px;
    margin-right:auto;
}

JavaScript

$("ul").on("click", "li a", function () {
    var index = $(this).parent("li").index();
    $("#mainMan").find("div:eq(" + index + ")").prependTo("#mainMan")
});