JSFiddle - React, Tailwind, and code Playground

HTML

<section class="main">
    <section class="tabsblock">
        <div class="wrap">
            <div class="tab">
                <ul class="tabs clearfix">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                </ul>
                <!-- tabs -->
                <div class="box visible">
                    <div class="box-text">
                         <h3>TAB ====== 1</h3>

                        <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.</p>
                    </div>
                    <img id="tab_1" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" />
                </div>
                <!-- box -->
                <div class="box">
                    <div class="box-text">
                         <h3>TAB ====== 2</h3>

                        <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.</p>
                    </div>
                    <img id="tab_2" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" />
                </div>
                <!-- box -->
                <div class="box">
                    <div class="box-text">
                         <h3>TAB ====== 3</h3>

                        <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.</p>
                    </div>
                    <img id="tab_3" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437"...

CSS

/* reset -------------------------- */
 html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, dfn, del, p, blockquote, fieldset, input, textarea, select, article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, button, canvas, video {
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, th, dfn, del {
    font-weight: normal;
    font-style: normal;
}
ul, ol {
    list-style: none;
}
fieldset, img {
    border: none;
}
caption, th {
    text-align: left;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input[type="button"], input[type="submit"], input[type="reset"], button {
    cursor: pointer;
    line-height: normal;
}
button, input {
    line-height: normal;
}
input[type="hidden"], [hidden], .hidden {
    display: none;
}
textarea {
    overflow: auto;
    resize: none;
}
article, aside, details, figcaption, figure, footer, header, nav, section, .clearfix {
    display: block;
}
audio, canvas, video {
    display: inline-block;
}
a > img {
    vertical-align: bottom;
}
strong, b {
    font-weight: bold;
}
em, i {
    font-style: italic;
}
del {
    text-decoration: line-through;
}
:focus {
    outline: none;
}
/* tools -------------------------- */
 .clear {
    clear: both;
    display: block;
    line-height: 0;
    height: 0;
    font-size: 0;
}
.clearfix:after, .wrap:after, aside:after, section:after, article:after, .text:after {
    content:".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    font-size: 0;
}
.align-left {
    float: left !important;
}
.align-right {
    float: right !important;
}
.overflow-hidden {
    overflow: hidden;
    display: block;
}
/* common -------------------------- */
 html {
    height: 100%;
    background: #ffffff;
}
body {
    height: 100%;
    font: 17px/26px"Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #6a6a6a;
    -webkit-font-smoothing:...

JavaScript

console.log("sdasdsad");
//tab
$('.tabs').delegate('li:not(.active)', 'click', function () {
    $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq($(this).index()).fadeIn(250);
});

document.getElementById('tab_1').addEventListener('click', function () {
   $('.tabs li').removeClass('active').eq(1).addClass('active'); $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(1).fadeIn(250);
});
document.getElementById('tab_2').addEventListener('click', function () {
   $('.tabs li').removeClass('active').eq(2).addClass('active'); $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(2).fadeIn(250);
});
document.getElementById('tab_3').addEventListener('click', function () {
    $('.tabs li').removeClass('active').eq(0).addClass('active');
    $(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(0).fadeIn(250);
});