JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <ul class="clearfix">
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
        <li>Tab 4</li>
        <li class="last">Tab 5</li>
    </ul>
    <div class="contents">
        <div>
            <p>Content for tab 1</p>
        </div>
        <div>
            <p>Content for tab 2</p>
        </div>
        <div>
            <p>Content for tab 3</p>
        </div>
        <div>
            <p>Whasssssssup.
            SJjekdkd
            </br>
            Oh rly,
            nope,
            sry</p>
        </div>
        <div>
            <p>Content for tab 5</p>
        </div>
    </div>
</div>

CSS

* { font: normal 12px/20px Helvetica,Arial; }

.box {
    width: 285px;
    background: #eee;
    padding: 5px;
    border-radius: 3px;
}

.box > ul {
    margin: 0;
    list-style:none;
}

.box > ul li {
    margin: 0 5px 0 0;
    border: 1px solid #ccc;
    padding: 5px 10px;
    background: #fff;
    float: left;
    border-radius: 3px;
    cursor: pointer;
}

.box > ul li.last {
    margin: 0;
}

.box .contents {
    margin: 5px 0 0;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 10px;
}

.box .contents > div {
    display: none;   
}

.clearfix:before, 
.clearfix:after   { content: ""; display: table; }
.clearfix:after   { clear: both; }
.clearfix         { zoom: 1; }

JavaScript

$(function() {
    
    $('.box').each(function() {
        
        var contents = $(this).find('.contents'),
            tab      = $('> ul li', this);
        
        $('div', contents).eq(0).show();
       
        tab.hover(function() {
            
            tab.removeClass('active');
            $(this).addClass('active');
            
            $('div', contents).hide().eq($(this).index()).show();
            
        });
       
    }); 
    
});