JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="x">
    <li id="team1"><a href="#">Misión </a> 
    </li>
    <li id="team2"><a href="#">Visión</a>

    </li>
</ul>
<ul class="y">
    <li id="c1" style="">
        <div>Content 1
            <br />
        </div>
    </li>
    <li id="c2">
        <div>Content 2</div>
    </li>
</ul>

CSS

.tab_over {
    background-color:#CCC;
}
ul.x {
    list-style:none;
}
ul.x li {
    display:inline-block;
}
ul.x li a {
    text-decoration:none;
}
ul.y li#c1 {
    border:1px solid blue;
    list-style:none;
}
ul.y li#c2 {
    border:1px solid red;
    list-style:none;
    display:none;
}

JavaScript

$(document).ready(function () {
    jQuery.fn.extend({
        showcontent: function () {
            this.each(function () {
               
                var options = {
                    direction: 'vertical'
                };
                $(':animated', '.y').stop(true, true);
                if ($(this).is(':visible')) {
                    $(this).siblings('li').hide();
                } else {
                    $(this).siblings('li').hide();
                    if (!$(this).is(":animated")) {
                        $(this).toggle("clip", options, 400);
                    }
                }
            });
            return this;
        }
    });

    $("#team1").addClass('tab_over');
    $("#team1").click(function (e) {
        e.preventDefault();
        $(this).addClass('tab_over').siblings().removeClass('tab_over');
        $('#c1').showcontent();
        return false;
    });
    $("#team2").click(function (e) {
        e.preventDefault();
        $(this).addClass('tab_over').siblings().removeClass('tab_over');
        $('#c2').showcontent();
        return false;
    });
});