JSFiddle - React, Tailwind, and code Playground

HTML

<!--==============================content================================--><div id="showcase" class="showcase">
	<!-- Each child div in #showcase represents a slide -->
	<div class="showcase-slide">
		<!-- Put the slide content in a div with the class .showcase-content. -->
     	<div class="showcase-content">
			<!-- If the slide contains multiple elements you should wrap them in a div with the class .showcase-content-wrapper. -->
			<div class="showcase-content-wrapper">
				<!-- For dynamic height to work in webkit you need to set the width and height of images in the source.
				 Usually works to only set the dimension of the first slide in the showcase. -->
				<img src="foto/pauline/01inf-333x500.jpg" alt="01" width="333px" height="500px" />
				<p class="static-caption">Свадебное платье коллекции PAULINE.</p>
			</div>
		</div>
		<!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
		<div class="showcase-thumbnail">
			<img src="foto/pauline/01inf-333x500.jpg" alt="01" width="140px" />
			<!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
			<div class="showcase-thumbnail-cover"></div>
		</div>
	</div>
	<!-- Each child div in #showcase represents a slide -->
	<div class="showcase-slide">
		<div class="showcase-content">
			<div class="showcase-content-wrapper">
				<img src="foto/pauline/aAj04qjrjuo.jpg" alt="02" />
				<p class="static-caption">Свадебное платье коллекции PAULINE.</p>
			</div>
		</div>
		<div class="showcase-thumbnail">
			<img src="foto/pauline/aAj04qjrjuo.jpg" alt="01" width="140px" />
			<div class="showcase-thumbnail-cover"></div>			
		</div>
	</div>
	<!-- Each child div in #showcase represents a slide -->
	<div class="showcase-slide">
		<div class="showcase-content">
			<div class="showcase-content-wrapper">
				<img src="foto/pauline/euVuOJ9Sch0.jpg" alt="03" />
				<p class="static-caption">Свадебное платье коллекции...

CSS

@import url(http://fonts.googleapis.com/css?family=Six+Caps);/*font-family: 'Six Caps', sans-serif;*/
@import url(http://fonts.googleapis.com/css?family=Simonetta);/*font-family: 'Simonetta', cursive;*/

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}

/* Global properties ======================================================== */
html, body {width:100%; padding:0; margin:0; height:100%;}

body {font-family:  Arial, Helvetica, sans-serif; 	 
	font-size:12px; 
	line-height:18px;
	color:#919191;
	background:#fff;
	min-width:1060px;}
		
.main{width:100%;height: auto; min-height:100%;background: url(../images/bg-body.jpg) center 0 repeat;padding-bottom:20px;}
/***********************************************************************/
/*================================>Block-classes<==========================*/
.txt-dec-n{text-decoration:none !important;}
.txt-dec-u{text-decoration: underline;}
.txt-up-n{text-transform:none !important;}
.txt-up{text-transform:uppercase;}
.txt-al{text-align:center;}
.bold{font-weight:bold;}
.font-13{font-size:13px;color:#919191;}

.color{color:#ec7898;}
.color-1{color:#919191;}

.hov:hover{color:#000;}
.hov-1:hover{color:#ec7898;}

.border-none{border: none !important;}
.bg-none{background: none !important;}

.dis-block{display: block;}
.dis-inblock{display: inline-block;}

.marg-left-0{margin-left:0 !important;}	
.marg-right-0{margin-right:0 !important;}
.marg-left-right-0{margin-left:0 !important; margin-right:0 !important;}
.last-mbot{margin-bottom:0 !important;}	
.last-pbot{padding-bottom: 0 !important;}
.last-mpbot{margin-bottom:0 !important;padding-bottom:0 !important;}
/*===============================>Indent<==================================*/
.padd{margin:22px 0 10px 0;}
.padd-0{margin:22px 0 17px...