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-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCN8RP_tg6inU71T_xbnbHoR4g0oq1GOglLFjyP3FaWVC4hIZO);
}
.tab2 {
    background-image:url(http://th09.deviantart.net/fs71/200H/f/2012/278/9/7/facebook_logo_png_by_mist_tutorials-d5gw3xa.png);
}
.tab3 {
    background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCN8RP_tg6inU71T_xbnbHoR4g0oq1GOglLFjyP3FaWVC4hIZO);
}
.tab4 {
    background-image:url(http://th09.deviantart.net/fs71/200H/f/2012/278/9/7/facebook_logo_png_by_mist_tutorials-d5gw3xa.png);
}
.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-image',$(this).css('background-image'));
    $(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-image',$('.tabs .selected').next().css('background-image'));
        $('.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-image',$('.tabs .selected').prev().css('background-image'));
        $('.tabs .selected').removeClass('selected').prev().addClass('selected');
    } else {
        return false;
    }
});
});