JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="container">
		<div id="slideshow">
			<figure tabindex=1 id="fig1">
			<figcaption>Слайд 1</figcaption>				
			<figure tabindex=2 id="fig2">
			<figcaption>Слайд 2</figcaption>
			<figure tabindex=3 id="fig3">
			<figcaption>Слайд 3</figcaption>
			<figure tabindex=4 id="fig4">
			<figcaption>Слайд 4</figcaption>
			<figure tabindex=5 id="fig5">
			<figcaption>Слайд 5</figcaption>
			<figure tabindex=6 id="fig6">
			<figcaption>Слайд 6</figcaption>
				<figure id="box">
					<img src="http://s12.postimg.org/wgieyf899/face1.jpg"/>
					<img src="http://s12.postimg.org/psltbtor1/face2.jpg"/>
					<img src="http://s12.postimg.org/8glgqdv9p/face3.jpg"/>
					<img src="http://s12.postimg.org/5771jx765/face4.jpg"/>
					<img src="http://s12.postimg.org/7fl819ea5/face5.jpg"/>
					<img src="http://s12.postimg.org/z4cgmiqod/face6.jpg"/>
				</figure>
			</figure>
			</figure>
			</figure>
			</figure>
			</figure>
			</figure><div class="progress">
    <span class="progress-val">84%</span>
    <span class="progress-bar"><span class="progress-in"></span></span>
  </div>
		</div>		
	</div>
</body>

CSS

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot,
thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
:focus {	outline: 0;}
header, section, footer,aside, nav, article {display: block;}
html {
 width: 100%;
 height: 100%;
 background-color: #FFFFFF;
 background-image: -moz-linear-gradient(top, #FFFFFF, #b3b3b3); 
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #b3b3b3)); 
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3'); 
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3')";  
}

#container {width: 960px;margin: 0 auto;}
#slideshow {width: 900px;margin: 50px auto 0 auto;padding: 50px 0 0 0;-webkit-perspective: 800;}
figure {display: inline;-webkit-transform-style: preserve-3d;}

#box {
 position: relative;
 display: block;
 width: 900px;
 height: 400px; 
 -webkit-transform: translateZ(-200px); /* Сдвигаем 3D объект назад к плоскости */
 -webkit-transition: -webkit-transform 1s;  /* Переход для трансформации */
}
#box img {position: absolute;top: 0;left: 0;}

figcaption {
 display: inline-block;
 width: 70px;
 height: 35px;
 background: rgba(0,0,0,0.6);
 border: 1px solid rgba(0,0,0,0.7);
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 border-radius: 20px;
 text-align: center;
 line-height: 35px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 cursor: pointer; 
 position:...