JSFiddle - React, Tailwind, and code Playground

by GreenMonster

HTML

<div class="tabs">
	<div class="tabs__caption">
		<span class="active">Первая вкладка</span>
		<span>Вторая вкладка</span>
		<span>Третья вкладка</span>
		<span>Червертая вкладка</span>
	</div>

	<div class="tabs__content  active">
		<div class="top-movie">
            <img src="http://kinogo.co/uploads/posts/2015-10/1445226811_viktorfrankenshteyn.jpg">
            <div class="top-movie-genre">
                <a href="">Drama</a>, <a href="">Drama</a>
            </div>
            <div class="top-movie-title">Victor Frankenstein</div>
	</div>

	<div class="tabs__content">
	</div>

	<div class="tabs__content">
	</div>

	<div class="tabs__content">
	</div>
        </div>

CSS

.tabs {
	width: 750px;
}
.tabs__caption {
    padding: 30px 0px 50px;
}
.tabs__caption span {
	float: left;
	padding: 0px 22px;
    border-right: 1px solid #DFDFDF;
	cursor: pointer;
}
.tabs__caption span:last-child {
	border-right: none;
}
.tabs__caption span:hover {
	color: #F08418;
}
.tabs__caption .active {
	color: #F08418;
}
.tabs__content {
	display: none;
}
.tabs__content.active {
	display: block;
}

.top-movie {
    width: 175px;
    margin-right: 15px;
}

.top-movie img {
    display: block;
    width: 175px;
    height: 260px;
    border-radius: 3px;
}

.top-movie-genre a {
    color: #9B9B9B;
    font-size: 11px;
}

.top-movie-title {
    color: #232C31;
    font-size: 14px;
}

JavaScript

(function($) {
$(function() {

	$('.tabs__caption').on('click', 'span:not(.active)', function() {
		$(this)
			.addClass('active').siblings().removeClass('active')
			.closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
	});

});
})(jQuery);