JSFiddle - React, Tailwind, and code Playground
HTML
<div class="leading-0">
<h2>
<a href="/joomla8/index.php/73-hghr"> Заголовок</a>
</h2>
<div class="img-intro-none">
<img src="http://s49.radikal.ru/i125/1301/9c/86ed15df9b26.jpg" alt=""/>
</div>
<p>Здесь будет превью текста </p>
<p class="readmore">
<a href="/joomla8/index.php/73-hghr"> Читать далее</a>
</p>
<div class="item-separator"/>
</div>
CSS
.leading-0 {
margin-left: 5px;
margin-bottom: 5px;
border: 1px solid;
padding-left: 5px;
height: 120px;
}
.leading-0 h2 {
padding-left: 10px;
padding-top: 7px;
padding-bottom: 7px;
margin-top: 5px;
font-size: 16pt;
margin-left: 167px;
background-color: #617115;
}
.leading-0 p {
display: block;
color: #6b6b6b;
margin-left: 173px;
margin-top: -10px;
}
P.readmore {
}
.leading-0 img {
float: left;
margin-top: -55px;
}
.item {
overflow: hidden;
margin-left: 5px;
margin-bottom: 5px;
border: 1px solid;
padding-left: 5px;
height: 120px;
}
.item h2 {
padding-left: 10px;
padding-top: 7px;
padding-bottom: 7px;
margin-top: 5px;
font-size: 10pt;
margin-left: 167px;
background-color: #617115;
}
.item img {
float: left;
margin-top: -40px;
}
.item p {
display: block;
color: #6b6b6b;
margin-left: 173px;
margin-top: -75px;
float: left;