JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <section id="types">
        <div id="types-menu">
        	<ul class="group">
<li><a href="index.html#" class="active">1</a></li>
<li><a href="index.html#">2</a></li>
<li><a href="index.html#">3</a></li>
<li><a href="index.html#">4</a></li>
<li><a href="index.html#">5</a></li>
            </ul>
        </div>
        
        <div id="panels">
        	<div class="panels">
            	<ul class="panels-ul">
                	<div class="panels-li">
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
                    </div>
                  <div class="panels-li">
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
                    </div>
                  <div class="panels-li">
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
                    </div>
                  <div class="panels-li">
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img src="https://placehold.it/50x50"></li>
<li><img...

CSS

#types .desc {
	margin: 0 auto;
	width:500px;
	overflow:hidden;
	margin-bottom:40px;
}
#types .desc .image {
	float:left;
}
#types .desc span {
	display:block;
	margin-left:129px;
	padding:14px 0 0 0;
}
#types .desc h3 {
	font-size:18px;
	line-height:22px;
	margin-bottom:4px;
	font-weight:bold;
}

#panels {
	width:500px;
	margin:0 auto;
	position:relative;
	height:60px;
	margin-bottom:20px;
}
#panels .panels {
	width:500px;
	height:60px;
	overflow:hidden;
	position:relative;
}
#panels .panels .panels-ul {
	margin:0;
	list-style:none;
	height:60px;
	position:absolute;
	width:5000px;
	overflow:hidden;
	top:0; left:0;
}
#panels .panels .panels-ul .panels-li {
	width:500px;
	height:60px;
	float:left;
}
#panels .panels .panels-ul li {
	float:left;
	margin-left:10px;
	line-height:0;
	position:relative;
}
#panels .panels .panels-ul .panels-li li:first-child {
	margin:0;	
}
#panels .arrow {
	position:absolute;
	cursor:pointer;
	top:30px;
}
#panels .arrow.alf {
  background:url(http://www.muenzmanufaktur.com/images/main/sl_prev.png) no-repeat;
	height:64px;
	width:64px;	
left:-60px;
}
#panels .arrow.arg {
   background:url(http://www.muenzmanufaktur.com/images/main/sl_next.png) no-repeat;
  	height:64px;
	width:64px;	
	right:-60px;
}
#panels .arrow.alf.disable {
	background-position: left top;
}
#panels .arrow.arg.disable {
	background-position: right top;
}
#types h2 {
	margin-bottom:10px;
}
#types-menu {
	text-align:center;
	font-size:18px;
	margin-bottom:20px;
}
#types-menu .group {
	list-style:none;
	display:inline-block;	
	margin-left:-30px;
}
#types-menu .group li {
	float:left;
	margin-left:30px;
}
#types-menu .group li a {
	color:#20478d;
	border-bottom:1px dotted #20478d;
	text-decoration:none;
}
#types-menu .group li a:hover {
	color:#28262d;
	border-bottom:none;
}
#types-menu .group li a.active {
	color:#28262d;
	font-weight:bold;
	border-bottom:none;
}

JavaScript

var CAROUSEL = {
	id: 0,
	width: 500,
	length: 0,
	ready: function() {
		
		var self = jQuery('#panels');
		var plane = self.find('.panels-ul');
		
		CAROUSEL.length = plane.find('.panels-li').length;
		
		plane.width( CAROUSEL.length * ( CAROUSEL.width + 10 ) + 100 );
		
		$('#tabs .tab:first').show();
		
		$('#types-menu .group a').click(function(e) {
			var index = $('#types-menu .group a').index(this);
			plane.animate({ 'left': -(CAROUSEL.width * index) }, 'slow');
			CAROUSEL.id = index;
			CAROUSEL.resetDisable();
            return false;
        });
		
		self.find('.arrow.arg').click(function() {
			
			if(CAROUSEL.id < 6)
			{
				plane.animate({ 'left': '-=' + CAROUSEL.width + 'px' }, 'slow');
				CAROUSEL.id++;
				CAROUSEL.resetDisable();
			}
			
			return false;
		});
		
		self.find('.arrow.alf').click(function() {
			
			if(CAROUSEL.id > 0)
			{
				plane.animate({ 'left': '+=' + CAROUSEL.width + 'px' }, 'slow');
				CAROUSEL.id--;
				CAROUSEL.resetDisable();
			}
			
			return false;
		});
		
		CAROUSEL.resetDisable();
	},
	resetDisable: function() {
		$('.arrow.alf, .arrow.arg').removeClass('disable');
		
		$('#tabs .tab').hide().eq(CAROUSEL.id).show();
		
		$('.backline span font').text($('#types-menu .group a').eq(CAROUSEL.id).text());
		
		if(CAROUSEL.id == 0)
			$('.arrow.alf').addClass('disable');
		else if(CAROUSEL.id == 6)
			$('.arrow.arg').addClass('disable');
			
		$('#types-menu .group a').removeClass('active').eq(CAROUSEL.id).addClass('active');
	}
};

$(function(){ 
   
   CAROUSEL.ready();

 });