JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<ul id="hoverLinks">
    <li><a href="#" class="btn-theme_all" data-filter="*">ALL</a>

    </li>
    <li><a href="#" class="btn-theme_web" data-filter=".webdesign">web</a>

    </li>
    <li><a href="#" class="btn-theme_writing" data-filter=".writing">write</a>

    </li>
    <li><a href="#" class="btn-theme_sandbox" data-filter=".sandbox">sand</a>

    </li>
</ul>
<div id="PortfolioInfo">
    <p>All of my portfolio including web, writing and sandbox</p>
    <p class="webdesign">web work</p>
    <p class="writing">now is the time…</p>
    <p class="sandbox">no pooping</p>
    <p class="webdesign">more web work</p>
</div>

CSS

#PortfolioInfo {
    background-color:#eee;
    text-align:center;
    padding:10px;
    width:250px;
    height:250px;
    color:#333;
    font-weight:bold;
    border:3px solid #ccc;
    position:absolute;
    right:0;
    border-radius:5px;
    margin-right:50px;
}
#PortfolioInfo>* {
    display:none;
}

JavaScript

$("#hoverLinks").find("a").hover(function () {
    $("#PortfolioInfo>*").hide()
        .filter($(this).data("filter")).show()
})