JSFiddle - React, Tailwind, and code Playground

by Artem Pryanishnikov

HTML

<div class="plitka">

	<!--[if gt IE 9]><!--><div class="mj-simple-news" id="mj_simple_news_153530751223964"><!--<![endif]-->
		<!--Begin sn-items-->
		<div class="sn-items cf cols-lg-4 cols-md-3 cols-sm-2 cols-xs-1">
						<!--Begin sn-item-->
			<div class="sn-item ">
				<!--Begin sn-item-inner-->
				<div class="sn-item-inner">
					<!--Begin sn-image-->
				<div class="sn-image">
						<a href="http://www.taxtoken.in/wp-content/uploads/2017/11/300X300-2.png" title="Тестовый товар" >
							<img src="http://www.taxtoken.in/wp-content/uploads/2017/11/300X300-2.png"  data-original="http://www.taxtoken.in/wp-content/uploads/2017/11/300X300-2.png"   title = "МТС Касса" alt = "Тестовый товар" />
						</a>
												<div class="sn-created-hits">
														<span class="sn-created">
								Published: 08-07-2018							</span>
														<span class="sn-hits">
								Hits: 137							</span> 
													</div>
											</div>
										<!--End sn-image-->
										<!--Begin sn-infor-->
					<div class="sn-infor">
												<div class="sn-title">
							<a href="/index.php/mobilnye-kassy-mspos-k/test1" title="Тестовый товар" >
								Тестовый товар							</a>
						</div>
												<div class="sn-description">
							 
Ваш шедевр готов!
Товарищи! дальнейшее 						</div>
												<div class="sn-readmore">
							<a href="/index.php/mobilnye-kassy-mspos-k/test1" title="Тестовый товар"  >
								Read more							</a>
						</div>
											</div>
					<!--End sn-infor-->
									</div>
				<!--End sn-item-inner-->
			</div>
 </div>

CSS

.plitka .sn-item {
	position: relative;
	width: 300px;
  height:450px;
  border:4px double red;
  
	}
.plitka .sn-item img {
  margin-top:54px;
}
.plitka .sn-item .sn-infor .sn-title {
	
	position:absolute;
  top:0px;
	width: 100%;
  color:white;
  background:#0d72d5;
  text-align:center;
  font-size:22px;
  height:54px;
	}
.plitka .sn-item .sn-infor .sn-title a:link {font-size:22px; color:White; text-decoration: none}

.plitka .sn-item .sn-infor .sn-description {  
position: absolute;
top:355px;
font-size: 14px; 
font-weight: 700; 
font-family: 'Segoe UI'; 
text-align: center; 
color: black; 
}
.plitka .sn-item .sn-infor .sn-readmore { 
display: none;
}