JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
        <p class="show"></p>
        <ul class="tabs">
            <li>Вкладка 1 <p><a href="sample.html"><img src="images/sample.gif" width="50" 
   height="50" border="0" alt="Пример"></a></p></li>
            <li>Вкладка 2</li>
            <li>Вкладка 3</li>
            <li>Вкладка 4</li>
        </ul>
        <div class="tab">
            Контент 1
        </div>
        <div class="tab">
            Контент 2
        </div>
        <div class="tab">
            Контент 3
        </div>
        <div class="tab">
            Контент 4
        </div>
    </div>

CSS

/* tabs */
ul {
    list-style:none;
}
.parent {
    height:300px;
    width:600px;
    padding:10px;
    background:#ccc;
}
.tabs li,
.hide,
.show {
    line-height:45px;
    padding:0 00px;
    text-align:center;
    background:#777;
    border:1px solid green;
    float:left;
    cursor:pointer;
    margin-right:00px;
    border-radius:1px;
}
/.show:after {
    content:"Показать";
}
/.hide:after {
    content:"Скрыть";
}
.tabs {
    display:all;
    margin-bottom:10px;
}
.tabs li.active {
    background:green;
}
.tab {
    float:left;
    margin-top:00px;
    width:580px;
    padding:10px;
    min-height:200px;
    clear:both;
    background:green;
    color:#eee;
    display:none;
}
.tab.active {
    display:block;
}

JavaScript

jQuery(document).ready(function($) {
            $(".show").click(function(){
                $(".tabs").toggle(0);
                $(".tab").hide();
                $("ul.tabs li").removeClass("active");
               $(this).toggleClass("hide");
            });
            $('ul.tabs').delegate('li:not(.active)','click',function(){
                $(this).addClass('active').siblings().removeClass('active').parents('.parent').find('.tab').hide().eq($(this).index()).toggle(0);
            });
        });