JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabsholder">
    <ul class="tabs">
        <li id="tab1">ZORNET 1</li>
        <li id="tab2">ZORNET  2</li>
        <li id="tab3">ZORNET  3</li>
        <li id="tab4">ZORNET  4</li>
    </ul>
    <div class="contents marginbot">
        <div id="content1" class="tabscontent"><p>Несколько лет назад вы покупали игру за согласованную сумму денег, и это был конец транзакции. Затем появилась конная доспеха.</p></div>
        <div id="content2" class="tabscontent">В настоящее время общие « лут-боксы » могут не быть окончательной формой микротранзакций. Activision получила патент на систему для поощрения покупок в игре, которая звучит позитивно в игре.</div>
        <div id="content3" class="tabscontent">Патент, озаглавленный «система и способ управления микротранзакциями в многопользовательских видеоиграх», был подан в 2015 году, но только недавно был предоставлен . Это в основном способ вознаграждения игроков, которые покупают контент и тонко наказывают тех, кто не использует встроенные алгоритмы Matchmaking игры.</div>
        <div id="content4" class="tabscontent">Допустим вы не покупали контент в шутере, который подчеркивает важность ящиков для добычи. Согласно этому патенту игра может быть разработана , чтобы поставить вас в матчах с игроками высшего уровня или тех.</div>
    </div>
</div>

CSS

* {
    padding:0px;
    margin:0px;
}
.center {
    width:60%;
    margin:20px auto 0 auto
}
.marginbot {
    margin-bottom:15px
}
ul.list li {
    list-style-type:none;
    margin-left:20px
}
ul.tabs {
    width:100%;
    overflow:hidden
}
ul.tabs li {
    list-style-type:none;
    display:block;
    float:left;
    color:#fff;
    padding:8px;
    margin-right:2px;
    border-bottom:2px solid #2f2f2f;
    background-color:#1f5e6f;
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
    cursor:pointer
}
ul.tabs li:hover {
    background-color:#43b0ce
}
ul.tabs li.current {
    border-bottom:2px solid #43b0ce;
    background-color:#43b0ce;
    padding:8px
}
.tabscontent {
       border-top: 2px solid rgba(45, 126, 148, 0.95);
    padding: 8px 8px 8px 8px;
    display:none;
    width:100%;
    text-align:justify
}

JavaScript

(function ($) {
    $.fn.tytabs = function (options) {
        var defaults = {
            prefixtabs: "tab",
            prefixcontent: "content",
            classcontent: "tabscontent",
            tabinit: "1",
            catchget: "tab",
            fadespeed: "normal"
        }, opts = $.extend({}, defaults, options);
        return this.each(function () {
            var obj = $(this);
            opts.classcontent = "." + opts.classcontent;
            opts.prefixcontent = "#" + opts.prefixcontent;

            function showTab(id) {
                $(opts.classcontent, obj).stop(true, true);
                var contentvisible = $(opts.classcontent + ":visible", obj);
                if (contentvisible.length > 0) {
                    contentvisible.fadeOut(opts.fadespeed, function () {
                        fadeincontent(id)
                    })
                } else {
                    fadeincontent(id)
                }
                $("#" + opts.prefixtabs + opts.tabinit).removeAttr("class");
                $("#" + opts.prefixtabs + id).attr("class", "current");
                opts.tabinit = id
            }

            function fadeincontent(id) {
                $(opts.prefixcontent + id, obj).fadeIn(opts.fadespeed)
            }
            $("ul.tabs li", obj).click(function () {
                showTab($(this).attr("id").replace(opts.prefixtabs, ""));
                return false
            });
            var tab = getvars(opts.catchget);
            showTab(((tab && $(opts.prefixcontent + tab).length == 1) ? tab : ($(opts.prefixcontent + opts.tabinit).length == 1) ? opts.tabinit : "1"))
        })
    };

    function getvars(q, s) {
        s = (s) ? s : window.location.search;
        var re = new RegExp("&" + q + "=([^&]*)", "i");
        return (s = s.replace(/^\?/, "&").match(re)) ? s = s[1] : s = ""
    }
})(jQuery);

$(document).ready(function () {
    $("#tabsholder").tytabs({
        tabinit: "1", // Какая вкладка...