JSFiddle - React, Tailwind, and code Playground

HTML

<!--slide-part-starts--><div class="slide-part">
    <!--slider-starts--><div class="fadein">
<img id="img1" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="http://placehold.it/300"><!--powerock-->
<img id="img2" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="http://placehold.it/250x250/cdcdcd"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<div class="tabbed">
        <ul class="tab-slide">
        <li><a data-id="img1" href="#">POWEROCK 13600mAh Power Banks</a></li>
        <li style="float:right"><a data-id="img2" href="#">POWERPUNCH 10500mAh Power Banks</a></li>
        </ul>
    </div>

CSS

.slide-part{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    min-height:100px;
    height:100%
}

.fadein {
    position:relative; 
    width:100%; 
    max-width:1600px; 
    margin:0 auto; 
    min-height:600px;
    height:100%
}

.fadein img {
    position:absolute; 
    left:0; 
    top:0; 
    height:auto; 
    max-width:100%; 
    width: auto\9;
}

.tabbed{
    width:100%;
    max-width:1600px;
    margin:0 auto
}

ul.tab-slide{
    margin:0; 
    padding:0
}

ul.tab-slide li{
    list-style:none;
    width:50%;
    display:block;
    float:left;
    display:list-item;
    text-align:center;
    background:#00a3d3
}

ul.tab-slide li a{
    position:relative;
    color:#000;
    text-decoration:none;
    width:100%;
    display:block;
    color:#fff;
    padding:15px 0 15px 0;
}

ul.tab-slide li:hover{background:#000;}

JavaScript

$(function() {
    $('.fadein img:gt(0)').hide();
    setInterval(function() {
        $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
    }, 5000);
    $('.tabbed a').on({
    'mouseenter': function() {
        $('.fadein img').hide();
        $('#' + $(this).data('id')).fadeIn();
    }
});
});