JSFiddle - React, Tailwind, and code Playground

HTML

<body>	
	<p class="thumbs">
		<a href="images/hitmen.jpg" title="Хитмен-агент"><img class="active" src="images/thumbs/hitman-thumb.jpg" alt="Хитмен-агент"></a>
		<a href="images/9tenths.jpg" title="Девять десятых"><img src="images/thumbs/9tenths-thumb.jpg" alt="Девять десятых"></a>
		<a href="images/prityazhenie.jpg" title="Притяжение"><img src="images/thumbs/prityazhenie_thumb.jpg" alt="Притяжение"></a>
    </p>
    <p class="thumbs">
		<a href="images/22-minutes.jpg" title="22 минуты"><img src="images/thumbs/22-minutes_thumb.jpg" alt="22 минуты"></a>
		<a href="images/kurier.jpg" title="Курьер из рая"><img src="images/thumbs/kurier-thumb.jpg" alt="Курьер из рая"></a>
		<a href="images/unity.jpg" title="Единство"><img src="images/thumbs/unity-thumb.jpg" alt="Единство"></a>
    </p>
    <p class="thumbs">
		<a href="images/sound-of-music.jpg" title="Звуки музыки"><img src="images/thumbs/sound-of-music_thumb.jpg" alt="Звуки музыки"></a>
		<a href="images/star-dust.jpg" title="Звездная пыль"><img src="images/thumbs/star-dust-thumb.jpg" alt="Звездная пыль"></a>
		<a href="images/blast-vegas.jpg" title="Разрушение Вегаса"><img src="images/thumbs/blast-vegas_thumb.jpg" alt="Разрушение Вегаса"></a>
		
	</p>
	<p id="img-container"><img src="images/hitman.jpg" alt="Hitman" id="largeImg"></p>
	<div class="films-descr" style="clear: left">
	    <div class="hide" id="hitman">
         <ul>
              <li>Год премьеры: 2015</li>
              <li>Жанры: Боевик, Детектив, Триллер</li>
              <li>Страны: США</li>
          </ul>
        <p>История об элитном убийце, созданном при помощи генной инженерии. Его очередной целью становится молодая женщина, скрывающаяся от влиятельной подпольной организации. Неожиданно эта миссия становится поразительным откровением для убийцы и его цели, сталкивая их обоих с их собственным прошлым...</p>
        </div>
		<div class="hide" id="9tenths">
         <ul>
              <li>Год премьеры: 2006</li>
              <li>Жанры: Драма,...

CSS

body {
    font: 75%/120% Arial, Tahoma, sans-serif;
    width: 1050px; margin: 30px auto;
    background: #666 url(../images/body-bg2.png);
    }

.hide {display: none; }

#largeImg{
    border: solid #666 2px; padding: 4px;
    background: #fff;
}
#img-container {
    margin: 0 10px;
    width: 438px;
    height: 642px;
    float: left;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 0 3px 3px rgba(0,0,0,.5);
}
#largeImg { height: 630px;}

.thumbs { width: 156px; float: left; margin: 0 20px 0 10px; position: relative; }
   
.thumbs a {display: inline-block; position: relative; }
.thumbs a img {
    width: 145px; height: 200px;
	background: #fff;  
	border: solid #666 2px; 
	padding: 4px;
    box-shadow: 0 0 1px 1px rgba(0,0,0,.5);
}

.thumbs a img:hover, .thumbs img.active {border-color: #031f7c; background: #518af5; }