JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="tabs">
    <div class="tab1"></div>
    <div class="tab2"></div>
    <div class="tab3"></div>
    <div class="tab4"></div>
</div>
<div class="bigTab">

</div>
    <a class="next">Next</a>
    <a class="prev">Prev</a>

CSS

.tabs > div {
    float:left;
    margin:0 20px 20px 0;
    width:50px;
    height:50px;
}
.tab1 {
    background-color:black;
}
.tab2 {
    background-color:green;
}
.tab3 {
    background-color:red;
}
.tab4 {
    background-color:blue;
}
.bigTab {
    position:relative;
    width:200px;
    height:200px;
    border:1px solid yellow;
    clear:both;
}

JavaScript

$(document).ready(function(){
$('.tabs > div').on('click',function(){
    $('.bigTab').css('background-color',$(this).css('background-color'));
    $(this).addClass('selected').siblings().removeClass('selected');
});

$('.next').on('click',function(e){
    e.preventDefault();
    if ( $('.tabs > .selected').length && !$('.tabs .selected').is('.tabs > div:last') ) {
        $('.bigTab').css('background-color',$('.tabs .selected').next().css('background-color'));
        $('.tabs .selected').removeClass('selected').next().addClass('selected');
    } else {
        return false;
    }
});
$('.prev').on('click',function(e){
    e.preventDefault();
    if ( $('.tabs > .selected').length && !$('.tabs .selected').is('.tabs > div:first') ) {
        $('.bigTab').css('background-color',$('.tabs .selected').prev().css('background-color'));
        $('.tabs .selected').removeClass('selected').prev().addClass('selected');
    } else {
        return false;
    }
});
});