JSFiddle - React, Tailwind, and code Playground

by Artem Pryanishnikov

HTML

<div class="style2" style="">
	<a href="/index.php/mobilnye-kassy-mspos-k/test1">
	<img src="http://www.taxtoken.in/wp-content/uploads/2017/11/300X300-2.png" alt="Тестовый товар" style="width: 300px; height: 300px;" />
	<div class="mask">
					<h2>Тестовый товар fsdjlfsdhfjksdhkf</h2>
											<p> 
Ваш шедевр готов! dsakjdkasjdklasjdklasjdklasjkdljaskldjkjdqslakda
 за</p>
										
										
										
									</div>
									</a>
							</div>

CSS

.style2 {
	position: relative;
	width: 300px;
  height:450px;
  border:4px double red;
  
	}
.style2 img {
  margin-top:54px;
}
.style2 h2 {
	position: absolute;
	top: -20px;
	width: 100%;
  color:white;
  background:#0d72d5;
  text-align:center;
  font: 14px;
	}
.style2 p {  
position: absolute;
top:350px;
font-size: 12px; 
font-weight: 700; 
font-family: 'Segoe UI'; 
text-align: center; 
color: black; 
}