JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="slides">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
</div>
<div class="play">
  <div class="video active"></div>
  <div class="video"></div>
</div>

CSS

.slides {
  overflow: hidden;
}

.slide {
  width: 60px;
  height: 60px;
  float: left;
  background-color: green;
}

.video {
  width: 240px;
  height: 80px;
  background-color: grey;
}

.video.active {
  background-color: blue;
}

JavaScript

$('.slide').on('click', function(e) {
	var text = $(this).text();
  var next_text = $(this).next().text();
  
	$('.video').toggleClass('active');
  
	$('.video').filter('.active').text(text)
						 .end().not('.active').text(next_text);
});