JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li>
        Projects
        <ul>
            <li><a href="#">project1</a></li>
            <li ><a href="#">project2</a></li>
            <li><a href="#">project3</a></li>
        </ul>
    </li>
    <li>
        Photos
        <ul>
            <li><a href="#">photo1</a></li>
            <li><a href="#">photo2</a></li>
            <li><a href="#">photo3</a></li>
        </ul>
    </li>
    <li>
       other
        <ul>
            <li><a href="#">other1</a></li>
            <li><a href="#">other2</a></li>
            <li><a href="#">other3</a></li>
        </ul>
    </li>
</ul>
<div id="content" />

CSS

a {
    color: inherit;
    text-decoration: none;
    width: 100%;
}

#nav ul{
    display:none;
}
#nav li:hover ul{
    display: block;
}

#nav li:hover ul li:hover {
    background-color: red;
}

#nav li {
    float: left;
    width: 150px;
    text-align: center;
    background-color: yellow;
}

#nav a{
    display: block;
}

#content{
    font-size: 3em;
    margin-top: 100px;
    width: 200px;
    height: 200px;
    border: solid black;
    display: none;
}

.display {
    display: block;
}

JavaScript

$("a").click(
    function(event){
        $("#content").addClass("display").show("slow");
        var text = $(this).html();
        $("#content").html(text);
    }
);