JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mode">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
</ul>
<div id="tab1" class="tab-content" style="display: none">content 1</div>
<div id="tab2" class="tab-content" style="display: none">content 2</div>

CSS

.arrow {
    background: red;
    width: 12px;
    height: 10px;
    display: inline-block;
}
.active {
    color: yellow;
}

JavaScript

$(function(){
    var mode = $('#mode');
    var arrow = $('<span/>', {'class': 'arrow'});
    $('li a', mode).bind('click.mytabs', function() {
        $('li', mode).removeClass('active');
        $(this).parent().addClass('active').append(arrow);
        var a = $(this).attr('href');
        $('.tab-content').hide();
        $(a).show();
        return false;  
    }).filter(':first').triggerHandler('click.mytabs'); // eq(0) works as well
});