JSFiddle - React, Tailwind, and code Playground

by Artem Pryanishnikov

HTML

<div class="page">
<div class="list_contents ">
				
					
			<div class="view style2" style="width: 590px; margin: 10px; height: 260px;">
													<img src="http://logotipka.ru/images/stories/skachat_img/zhiv_ptici_nacec/enimals14.jpg" alt="Кассовое оборудование" style="width: 260px; height: 260px;" />
								<div class="mask">
					<h2>Кассовое оборудование</h2>
											<p>Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение систем массового участия.</p>
										
										
										
																		<a href="/index.php/15-tovary/kassovoe-oborudovanie" class="readmore">Подробнее</a>
															</div>
							</div>
					
			<div class="view style2" style="width: 590px; margin: 10px; height: 260px;">
													<img src="http://logotipka.ru/images/stories/skachat_img/zhiv_ptici_nacec/enimals14.jpg" alt="Мобильные кассы MSPOS-K" style="width: 260px; height: 260px;" />
								<div class="mask">
					<h2>Мобильные кассы MSPOS-K</h2>
											<p>Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение систем массового участия.</p>
										
										
										
																		<a href="/index.php/16-tovary/mobilnye-kassy-mspos-k" class="readmore">Подробнее</a>
															</div>
							</div>
					
			<div class="view style2" style="width: 590px; margin: 10px; height: 260px;">
													<img src="http://logotipka.ru/images/stories/skachat_img/zhiv_ptici_nacec/enimals14.jpg" alt="Защита информации" style="width: 260px; height: 260px;" />
								<div class="mask">
					<h2>Защита информации</h2>
											<p>Идейные соображения высшего порядка, а также рамки и место обучения кадров позволяет оценить значение систем массового участия.</p>
										
										
										
																		<a href="/index.php/17-tovary/zashchita-informatsii" class="readmore">Подробнее</a>
															</div>
							</div>
					
			<div class="view style2"...

CSS

.page{width:1500px; height: 2000px; border: 1px red;}
.style2 {
  display:block;
  
  margin-left:100px;;
	}

.style2 h2 {
	position: absolute;
	width: 100%;
  color:white;
  text-align:center;
  font: 14px;
  top: -10px;
  left: 50%;
	width: 50%;
 
  cursor: pointer; 
	}
.style2 p { 
position: absolute;
top:50px;
width: 50%;
left:50%;
font-size: 12px; 
font-weight: 700; 
font-family: 'Segoe UI'; 
text-align: center; 
color: black; 
animation: fade .5s linear forwards; 
} 
.style2 img{
  top: 50%;
	left: 25%;
}
.style2 a{
  top: 80%;
	left: 62%;
  width: 20%;
}
@keyframes fade { 
0% { 
opacity: 0; 
} 
100% { 
opacity: 1; 
} 
} 


/*--------------*/
.list_contents {
  margin: auto;
  text-align:center;
  align-items:center;
}

.list_contents .page_content  {
	display: none;
}

.list_contents .page_content.active {
	display: block;
}

.list_contents .clear {
	clear: both;
}

.list_contents .description_start {
	margin-bottom: 10px;
}

.list_contents .description_end {
	margin-top: 10px;
}

.list_contents .view {
	float: left;
	border: 5px solid #fff;
	overflow: hidden;
	position: relative;
	text-align: center;
	box-shadow: 1px 1px 2px #e6e6e6;
	cursor: default;
	box-sizing: border-box;
}

.list_contents .view .mask {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.list_contents .view img {
	display: block;
	margin: auto;
	position: absolute;
	-webkit-transform: translate(-50%,-50%) rotate(0deg) scale(1);
	-moz-transform: translate(-50%,-50%) rotate(0deg) scale(1);
	-o-transform: translate(-50%,-50%) rotate(0deg) scale(1);
	-ms-transform: translate(-50%,-50%) rotate(0deg) scale(1);
	transform: translate(-50%,-50%) rotate(0deg) scale(1);
}

.list_contents .view h2 {
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 20px;
	padding: 2px;
	margin: 15px 0 0 0;
	line-height: 16px;
  color:#0d72d5;
  text-align:center;
  font: 14px;
}

.list_contents .view p {
	font-family: Georgia, serif;
	font-style:...