JSFiddle - React, Tailwind, and code Playground

by Artem Pryanishnikov

HTML

<div class="list_contents ">
				
					
			<div class="view style1" style="width: 280px; margin: 10px; height: 520px;">
      	<img src="http://logotipka.ru/images/stories/skachat_img/zhiv_ptici_nacec/enimals14.jpg" alt="Кассовое оборудование" style="width: 260px; height: 260px;" />
												<div class="mask">
					<h2>Тестовый товар ,jkmijt yfpdfybt jxtym</h2>
											<p> 
Ваш шедевр готов!
Товарищи! дальнейшее развитие различных форм деятельности способствует подготовки и реализации позиций, занимаемых участниками в</p>
										
										
										
																		<a href="/index.php/mobilnye-kassy-mspos-k/test1" class="readmore">Подробнее</a>
															</div>
							</div>
					
			<div class="view style1" style="width: 280px; margin: 10px; height: 520px;">
      	<img src="http://logotipka.ru/images/stories/skachat_img/zhiv_ptici_nacec/enimals14.jpg" alt="Кассовое оборудование" style="width: 260px; height: 260px;" />
												<div class="mask">
					<h2>Тестовый товар 2</h2>
											<p>Не следует, однако
 забывать, что сложившаяся структура организации требуют 
определения и уточнения системы обучения кадров, соответствует насущным</p>
										
										
										
																		<a href="/index.php/mobilnye-kassy-mspos-k/8-tovary/10-testovyj-tovar-2" class="readmore">Подробнее</a>
															</div>
							</div>
					
			<div class="view style1" style="width: 280px; margin: 10px; height: 520px;">
      	<img src="http://logotipka.ru/images/stories/skachat_img/zhiv_ptici_nacec/enimals14.jpg" alt="Кассовое оборудование" style="width: 260px; height: 260px;" />
												<div class="mask">
					<h2>Тестовый товар 3</h2>
											<p>Повседневная практика показывает, что новая модель организационной деятельности в значительной степени обуславливает создание новых предложений. Таким</p>
										
										
										
																		<a href="/index.php/mobilnye-kassy-mspos-k/8-tovary/11-testovyj-tovar-3"...

CSS

.style1 {
	position: relative;
	}

.style1 h2 {
	position: absolute;
  display: table-cell;
    vertical-align: middle;
  height:60px;
	width: 100%;
  top:-15px;
  margin:0 auto;
  color:white;
  background:#0d72d5;
  text-align:center;
  font: 14px;
  cursor: pointer; 
  
	}
.style1 p { 
position: absolute;
top:280px;
width: 100%;

font-size: 12px; 
font-weight: 700; 
font-family: 'Segoe UI'; 
text-align: center; 
color: black; 
animation: fade .5s linear forwards; 
} 
.style1 img{
  top: 170px;
	left:50%;
}
.style1 a{
  top: 90%;
  width: 50%;
  left:16%;
}
@keyframes fade { 
0% { 
opacity: 0; 
} 
100% { 
opacity: 1; 
} 
} 


/*--------------*/
.list_contents {

}

.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 {
	text-align: center;
	position: relative;
	font-size: 20px;
	padding: 2px;
	margin: 15px 0 0 0;
	line-height: 16px;
  text-align:center;
  font: 14px;
}

.list_contents .view p {
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 11px;
	position: relative;
	color: black;
	padding: 3px;
	text-align:...