JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">

         <div class="slidetabs">
         	<div class="slidetabcontent">
                <a href="#"><img src="http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/thumbnail_icon.jpg" /></a>
              <a href="#"><img src="http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/thumbnail_icon.jpg"></a>
              <a href="#"><img src="http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/thumbnail_icon.jpg"></a>
              <a href="#"><img src="http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/thumbnail_icon.jpg"></a>
              <a href="#"><img src="http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/thumbnail_icon.jpg"></a>
              <a href="#"><img src="http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/thumbnail_icon.jpg"></a>
              <a href="#"><img src="http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/thumbnail_icon.jpg"></a>
              <a href="#"><img src="http://www.iconshock.com/img_jpg/BETA/communications/jpg/256/thumbnail_icon.jpg"></a>
            </div>
        </div>

        <!-- "previous slide" button -->
        <a class="backward">Prev</a> 

            <!-- container for the slides -->
            <div class="images">

            	<!-- Carousel Slides 1 -->
                <div class="slide">
					<div class="large-image">
						<img src="http://justinsomnia.org/images/smart-car-thumbnail-icon.jpg" width="200" height="200">
						<span class="image-caption">Image Caption</span>
					</div>
	                <!-- Copy -->
	                
                </div>
				
				<!-- Carousel Slides 2 -->
                <div class="slide">
					<div class="large-image">
						<img src="http://justinsomnia.org/images/smart-car-thumbnail-icon.jpg" width="200" height="200">
						<span class="image-caption">Image Caption</span>
					</div>
	                <!-- Copy -->
	                
                </div>

                <!-- Carousel...

CSS

div.box{width: 680px; padding-left: 80px; padding-right: 0; margin: 0;position: relative;}
		div.box .images{height: auto;padding-top:8px;}
		div.box .large-image img,
		div.box .slidetabs a img{border-radius:15px; width: 460px;position: relative;z-index: 1;}
		div.box .slidetabs a img {width: 140px; }
		div.box .slidetabs a{float:left;margin-right: 0;margin-bottom: 10px;padding: 10px;}
		div.box .slidetabs a.current{background: #ccc;padding: 10px;}
		div.box .slidetabs{width: 800px; overflow: hidden; height: 110px;margin-left: -10px;margin-top: -10px;position: relative;}
		div.box a.backward{cursor:pointer;position: absolute;left: 42px;top:13px;display: block;width:30px;height:95px;background: #dedede;}
		div.box a.forward{cursor:pointer;position: absolute;right: 40px;top:13px;display: block;width:30px;height:95px;background: #dedede;}
		div.box .slide{min-height: 380px;}
		div.box .slide .large-image{float:left;width:460px;}
		div.box .slide .copy {float: left; width: 330px; margin-left: 25px; }
		div.box .slide .copy p{font-family: arial;font-size:12px;font-weight: normal;color:#464646;}
		div.box .slide .copy a{color:#00a9e0;}
		div.box .slide .copy .share{clear: both;}
		div.box .slide .copy .share > div{float: left !important;margin-right: 6px; display:block;}

		div.box .slide .copy .share p{font-weight: bold;display: block;margin-bottom: 3px;}
		div.box .miniNav{clear: both;height: 40px;}
		div.box .miniNav > *{float: left;}
		div.box .slide .miniNav p{padding:10px;}
		div.box .miniNav .backward,div.box .miniNav .forward{height: 39px; width: 39px; display: block; position: static; top: auto; left: auto;}
		div.box.food .miniNav > a:hover, div.box.beauty .miniNav > a:hover{  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}
		.slidetabs .slidetabcontent,.slidetabs .navi {position: absolute; height: 118px; overflow: hidden; width: 2000em; left: 0; }

JavaScript

var extCarousel = {

    		backBtn : $('.backward'),
    		fwdBtn : $('.forward'),
    		thumbItems : $('.slidetabcontent a'),
    		carouselItem : $('.slide'),
    		currentItemIndex : $('.currentIndex'),
    		totalItemsCount : $('.currentMax'),
    		lastItemIndex : $('.slidetabcontent a:last').index(),
    		firstItemIndex : $('.slidetabcontent a:first').index(),
    		defaultThumbnailSet : 5,

    		generateCarousel : function() {
    			var _this = this;
    			_this.thumbItems.eq('0').addClass('current');
    			_this.carouselItem.hide().filter(':first').addClass('active').show().find(_this.currentItemIndex).html($('.slide.active').index() + 1);
    			
    			_this.totalItemsCount.html(_this.thumbItems.length);
    			_this.controlNavigation();    			
    		},

    		controlNavigation : function() {
    			
    			var _this = this,
    				currentIndex, lastItem, firstItem;
    			
    			// Back Button
    			_this.backBtn.on('click', function(e){
    				e.preventDefault();
    				currentIndex = $('.slide.active').index() - 1,
    				firstItem = _this.firstItemIndex - 1;

    				if(currentIndex != firstItem) {
    					_this.moveCarousel(currentIndex);
    				}
    			});
    			
    			// Prev Button
    			_this.fwdBtn.on('click', function(e){
    				e.preventDefault();
    				currentIndex = $('.slide.active').index() + 1,
    				lastItem = _this.lastItemIndex + 1;

    				if(currentIndex != lastItem) {
    					_this.moveCarousel(currentIndex);
    				}
    			});

    			//Thumbnail Click
    			this.thumbItems.on('click', function(e) {
    				e.preventDefault();
    				currentIndex = $('.slide.active').index();
    				_this.moveCarousel(currentIndex);
    			});

    		},

    		moveCarousel : function(currIndex) {
    			var _this = this;
    			_this.carouselItem.removeClass('active').fadeOut('fast').eq(currIndex).addClass('active').fadeIn('fast');
    			_this.activateThumbnail(currIndex);
    		},

    		activateThumbnail :...