JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://autoadmin.tajweek.com/js/jquery.carouFredSel.js"></script>
<div class="type-head">
					<a class="prev" id="foo2_prev" href="#"><</a>
					<span class="prev" href="#"></span>
					<div id="foo2-name" class="categories">
							<span>Категория 4</span>
							<span>Спорт</span>
							<span >ываываываыв</span>
							<span>иииииии 5</span>
					</div>
					<span class="next"></span>
					<a class="next" id="foo2_next" href="#">></a>
				</div>

CSS

.categories span:last-child{position:absolute;left:-90px;color:#aaa}
				.categories span:nth-child(2){position:absolute;left:73px;color:#aaa}
a.prev, a.next {
	top:3px;
	text-decoration:none;
	width: 8px;
	height: 8px;
	z-index:99;
	display: block;
	position: absolute;
	color:#fff;
}
span.prev, span.next {
	top:3px;
	text-decoration:none;
	width: 37px;
	height: 20px;
	z-index:80;
	background:#597da3;
	display: block;
	position: absolute;
	color:#fff;
}
a.prev {left:6px;background: url(../img/border-ar.png) no-repeat right center;padding-right: 8px;height: 18px;}
a.next {right: 6px;background: url(../img/border-ar.png) no-repeat left center;padding-left: 8px;height: 18px;}
span.next {right: 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:200px;margin:2px 10px;float:left;text-align:center}

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"
			}
		});
	});