JSFiddle - React, Tailwind, and code Playground

HTML

<table class="content tabs_block">
    <tbody><tr>
        <td class="va-top">
            <ul class="tabs">
                <li class="active">верх Общая информация</li>
                <h3>3Д Фрезерование:</h3>
                <li>крупа 3д</li>
                <li>3д woods</li>
                <h3>3Д Фрезерование:</h3>
                <li>2д мир</li>
                <h3>3Д Фрезерование:</h3>
                <li>низ железо</li>
            </ul>
        </td>
        <td class="va-top">
            <div class="box visible">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </td>

    </tr></tbody>
</table>

CSS

td.va-top{vertical-align: top;}
/* панель навигации вкладок */

.tabs_block td:nth-child(1){width: 230px;}

.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
    width: 210px;
    margin-right: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background: rgba(60, 60, 60, 0.6);
}
/* список вкладок */
.tabs li {
    text-align:center;
    width: 100%;
    float:left;
    padding:8px 10px;
    margin-right:1px;
    cursor:pointer;
    color:#fff;
    -webkit-transition:all .2s linear 0s;
    -webkit-transition-delay:.2s 0s;
    transition:all .2s linear 0s;
    text-decoration: underline;
}
.tabs li:hover {color: blue;}


/* активная вкладка */
.tabs li.active {
    color:#ccc; 
}
/* блоки вкладок с содержанием */
.box {
    border: 1px solid #ccc;
    border-radius: 10px;
    background: rgba(60, 60, 60, 0.6);
    width:100%;
    padding: 15px;
    display:none;
    text-align: left;
    float: left;
    min-height: 550px;
    margin-bottom: 40px;
}
/* параграф внутри вкладок */
.box p {
    margin-bottom: 15px;
}
/* активный блок при загрузке */
.visible, .open_tab {
    display: block;
}
/* картинки внутри вкладок */
.box img {
    width: 25%;
    height: auto;
}
/* картинки слева */
.pl-left {
    float:left;
    
}
/* картинки справа */
.pl-right {
    float:right;
    margin:5px 0 5px 15px;
}
/* убираем выравнивание на маленьких экранах */
@media (max-width: 300px) {
  .tabs, .tabs li {
   float: none;
  }
}

JavaScript

(function(s) {
    var n;
    s(".tabs").on("click", "li:not(.active)", function() {
        n = s(this).parents(".tabs_block"), s(this).dmtabs(n)
    }), s.fn.dmtabs = function(n) {
        s(this).addClass("active").siblings().removeClass("active"), n.find(".box").eq(s(this).index()).show(1, function() {
            s(this).addClass("open_tab")
        }).siblings(".box").hide(1, function() {
            s(this).removeClass("open_tab")
        })
    }
})(jQuery);