JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://autoadmin.tajweek.com/js/jquery.carouFredSel.js"></script>
<div class="type image_carousel">
				<div class="type-head">
					<a class="prev" id="foo2_prev" href="#"><</a>
					<div id="foo2-name">
							<span>Категория 1</span>
							<span>Категория 2</span>
							<span>Категория 3</span>
							<span>Категория 4</span>
							<span>Категория 5</span>
					</div>
					<a class="next" id="foo2_next" href="#">></a>
				</div>
				<div class="type-content">
					<div id="foo2">
						<img src="http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg" alt="basketball" />
						<img src="http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg" alt="beachtree" />
						<img src="http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg" alt="cupcackes" />
						<img src="http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg" alt="hangmat" />
						<img src="http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg" alt="new york" />
					</div>
				</div>
				<div class="type-bottom"></div>
			</div>

CSS

a.prev, a.next {
top: 3px;
text-decoration: none;
width: 8px;
height: 8px;
display: block;
position: absolute;
color: #fff;
}
a.next {
right: 6px;
}
a.prev {
left: 6px;
}
.type-head {
position: relative;
width: 212px;
height: 24px;
color: #fff;
background: #597da3;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
}
#foo2-name span {
width: 212px;
margin-top: 5px;
float: left;
text-align: center;
}
.type-content {
position: relative;
width: 210px;
height: 170px;
background: #fff;
border-left: 1px solid #adbac7;
border-right: 1px solid #adbac7;
}
.image_carousel img {
width: 210px;
height: 170px;
background-color: white;
display: block;
float: left;
}

JavaScript

$(document).ready(function(){
		$("#foo2").carouFredSel({
			//circular: false,
			//infinite: false,
			auto 	: false,
			prev	: {	
				button	: "#foo2_prev",
				key		: "left"
			},
			next	: { 
				button	: "#foo2_next",
				key		: "right"
			}
		});
		$("#foo2-name").carouFredSel({
			auto 	: false,
			prev	: {	
				button	: "#foo2_prev",
				key		: "left"
			},
			next	: { 
				button	: "#foo2_next",
				key		: "right"
			}
		});
	});