JSFiddle - React, Tailwind, and code Playground
by Vaniljs
HTML
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<div class="block-1">
<div class="title">
Заголовок статьи 1
</div>
<div class="preview-txt">
Вступительный текст
</div>
<div class="other">
Прочее (картинка\кнопка\дата)
</div>
</div>
<br>
<div class="block-2">
<div class="title">
Заголовок статьи 2
</div>
<div class="preview-txt">
Вступительный текст
</div>
<div class="other">
Прочее (картинка\кнопка\дата)
</div>
</div>
<br>
<div class="block-3">
<div class="title">
Заголовок статьи 3
</div>
<div class="preview-txt">
Вступительный текст
</div>
<div class="other">
Прочее (картинка\кнопка\дата)
</div>
</div>
<br>
<div class="block-4">
<div class="title">
Заголовок статьи 4
</div>
<div class="preview-txt">
Вступительный текст
</div>
<div class="other">
Прочее (картинка\кнопка\дата)
</div>
</div>
<br>
<div class="block-5">
<div class="title">
Заголовок статьи 5
</div>
<div class="preview-txt">
Вступительный текст
</div>
<div class="other">
Прочее (картинка\кнопка\дата)
</div>
</div>
<br>
<div class="block-6">
<div class="title">
Заголовок статьи 6
</div>
<div class="preview-txt">
Вступительный текст
</div>
<div class="other">
Прочее (картинка\кнопка\дата)
</div>
</div>
<br>
<div class="block-7">
<div class="title">
Заголовок статьи 7
</div>
<div class="preview-txt">
Вступительный текст
</div>
<div class="other">
Прочее (картинка\кнопка\дата)
</div>
</div>
<br>
<div class="block-8">
<div class="title">
Заголовок статьи 8
</div>
<div class="preview-txt">
Вступительный текст
</div>
<div class="other">
Прочее (картинка\кнопка\дата)
</div>
</div>
<br>
<button onclick="">Load...
CSS
@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
font-family: 'Roboto', sans-serif;
}
.title .preview-text
.title {
font-weight: bold;
}
.preview-txt {
color: gray;
}
.other {
color: gray;
font-style: italic;
}