JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebox">
    <ul>
        <li id="infoBox_0" class="infoHighlighted"><h4>Header Here</h4><p>One Sentence</p></li>
        <li id="infoBox_1"><h4>Header Here</h4><p>One Sentence</p></li>
        <li id="infoBox_2"><h4>Header Here</h4><p>One Sentence</p></li>
        <li id="infoBox_3"><h4>Header Here</h4><p>One Sentence</p></li>
    </ul>
</div>

CSS

.sideBox {
    width: 225px;
    float: right;
    
}

.sidebox ul {
    
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.sidebox li {
    height:124px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #666;
}


.sidebox li:first-child{
    height:123px;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

.sidebox h4, .sidebox p
{
    margin: 0;
    color: #707070;
    padding:0;
    font-family: Georgia;

    font-size: 25px;
}

.sidebox li.infoHighlighted{
    border-top: 2px solid #00A4E4;    
    border-bottom: 2px solid #00A4E4;    
    position: relative;
    top: -1px;
}
.sidebox li.infoHighlighted h4 {
    color: #00A4E4;
    top: -1px;
    font-family: Georgia;
    font-size: 25px;
    margin:0;
    padding:0;
}

JavaScript

$(document).ready(function() {

    $(".sidebox li").click(function() {
        $(".sidebox li.infoHighlighted").removeClass("infoHighlighted");
        $(this).addClass("infoHighlighted");
     });

});