JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Screenshots</h3>
	<div id="slideshow-1" class="slideshow_wrapper">
	 <div class="slideshow">
	  <div class="current-slide_wrapper">
          <div class="current-slide" data-slide="1"></div>
	  </div>
	  <div class="other-slides_wrapper">
          <div class="other-slide current" data-slide="1"></div>
          <div class="other-slide" data-slide="2"></div>
          <div class="other-slide" data-slide="3"></div>
          <div class="other-slide" data-slide="4"></div>
          <div class="other-slide" data-slide="5"></div>
	  </div>
	 </div>
	</div>

CSS

div.slideshow{
 width: 100%;
 background: #B8B8B8;
 display: inline-block;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border: 1px solid #000;
 overflow: hidden;
}
	div.slideshow > div.current-slide_wrapper{
	 padding: 10px;
	 float: left;
	 width: 80%;
	 display: inline-block;
	 box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 overflow: hidden;
	 border-right: 1px solid #000;
	}
		div.slideshow > div.current-slide_wrapper div{
		 width: 100%;
         height: 400px;
         background: #444;
		 cursor: pointer;
		}
	div.slideshow > div.other-slides_wrapper{
	 padding: 10px 15px;
	 float: right;
	 width: 20%;
	 height: 100%;
	 display: block;
	 box-sizing: border-box;
	 -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	 overflow-y: auto;
	 overflow-x: hidden;
	}
		div.slideshow > div.other-slides_wrapper div{
		 background: #444;
		 border: 5px solid #FFF;
		 width: 100%;
         height: 75px;
		 cursor: pointer;
		 margin-left: -5px;
         margin-bottom: 10px;
		}
		div.slideshow > div.other-slides_wrapper div:hover{
		 border: 5px solid #EAEAEA;
		}
		div.slideshow > div.other-slides_wrapper div.current{
		 border: 5px solid #000;
		}