JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <ul class="tab_nav clearfix">
        <li><a href="tabid1" class="active">Lorem</a>

        </li>
        <li><a href="tabid2">Latin</a>

        </li>
        <li><a href="tabid3">German</a>

        </li>
        <li><a href="tabid4">English</a>

        </li>
    </ul>
    <div class="clear"></div>
    <div class="tab_container">
        <div class="tab_content tabid1 active">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum.</div>
        <div class="tab_content tabid2 ">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
        <div class="tab_content tabid3 ">Damit Ihr indess erkennt, woher dieser ganze Irrthum gekommen ist, und weshalb man die Lust anklagt und den Schmerz lobet, so will ich Euch Alles eröffnen und auseinander setzen, was jener Begründer der Wahrheit und gleichsam Baumeister des glücklichen Lebens selbst darüber gesagt hat. Niemand, sagt er, verschmähe, oder hasse, oder fliehe die Lust als solche, sondern weil grosse Schmerzen ihr folgen, wenn man nicht mit Vernunft ihr nachzugehen verstehe. Ebenso werde der Schmerz als solcher von Niemand geliebt, gesucht und verlangt, sondern weil mitunter solche Zeiten eintreten, dass man mittelst Arbeiten und Schmerzen eine grosse Lust sich zu verschaften suchen...

CSS

/*	Tabs
------------------------------------------------*/
 .tabs {
}
.tabs ul.tab_nav {
    height: auto;
    padding: 0;
    margin: 0;
    margin: 0 !important;
    list-style: none !important;
}
.tabs ul.tab_nav li {
    background: none;
    padding: 0 !important;
    float: left;
    margin: 0 1px 0 0 !important;
}
.tabs ul.tab_nav li a {
    font-family: Ubuntu Condensed;
    font-size: 14px;
    line-height: 40px;
    height: 40px;
    padding: 0 20px;
    background: #000000;
    display: block;
    color: #ffffff;
}
.tabs ul.tab_nav li a:hover {
    background-color: #1a1a1a;
}
.tabs ul.tab_nav li a.active {
    background: #53ae7a;
    color: #ffffff !important;
}
.tabs .tab_container {
    border-top: none;
    padding: 20px 0;
    position: relative;
    overflow: hidden;
    height: auto;
}
.tabs .tab_container .tab_content {
    float: left;
    display: none;
}
.tabs .tab_container .active {
    display: block;
}

JavaScript

/*---------------------------------------------- 
				        T A B S 
	------------------------------------------------*/
jQuery(".tabs").each(function (i) {
    jQuery(this).find('.tab_content').removeClass('active');
    var rel = jQuery(this).find('.active').attr('href');
    jQuery(this).find('.' + rel).addClass('active');
});

jQuery(".tab_nav").on("click", "a", function () {

    var parentdiv = jQuery(this).parent('li').parent('ul').parent('div');
    var rel = jQuery(this).attr('href');

    jQuery(parentdiv).find(".tab_nav a").removeClass("active");
    jQuery(this).addClass("active");

    jQuery(parentdiv).find(".tab_container .tab_content").hide().removeClass('active');
    jQuery(parentdiv).find(".tab_container ." + rel).fadeIn(500).addClass('active');

    return (false);

});

function get_url_param(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);

    if (results == null) return "";
    else return results[1];
}

if (window.location.search != "") {

    var tabid = get_url_param('tabid');
    
    jQuery(".tab_nav a").removeClass("active");
    jQuery("[href='tabid" + tabid + "']").addClass("active");

    jQuery(".tab_container .tab_content").hide().removeClass('active');
    jQuery(".tabid" + tabid).fadeIn(500).addClass('active');

}