JSFiddle - React, Tailwind, and code Playground

by KonstRuctor

HTML

<table class="megakrut">
    <tr>
        <th>
            <img src="http://placehold.it/200x200">
        </th>
        <td>
            
<h1><a href="#">Почему разновозрастно плато?</a></h1>

            <p class="authors">Фамилия Автора</p>
            <p>Лакколит подпитывает водоносный этаж, за счет чего увеличивается мощность коры под многими хребтами. Застываение лавы обрывисто стягивает плоскостной плюмаж, делая этот типологический таксон районирования носителем важнейших инженерно-геологических характеристик природных условий. Регрессия остаточно намагничена. Платформа несет в себе лимнический афтершок, образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов. Кальдера оседания, либо из самой плиты, либо из астеносферы под ней, увлажнена. Риолит, но если принять для простоты некоторые докущения, покрывает дрейф континентов, что позволяет проследить соответствующий денудационный уровень.</p>
            <p class="readmore"><a href="#">Читать далее</a> &rarr;</p>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="mozaic">
            <img src="http://placehold.it/133x89">
            <img src="http://placehold.it/133x89">
            <img src="http://placehold.it/133x89">
            <img src="http://placehold.it/133x89">
            <img src="http://placehold.it/133x89" style="margin-right: 0;">
        </td>
    </tr>
    <tr>
        <td colspan="2" class="about">
<a href="#">Раздел</a>  <b>|</b>  <a href="#">Страна</a>  <b>|</b> 22 сентября 2013 <b>|</b> Комментарии: 0</td>
    </tr>
</table>

CSS

.megakrut {
    border: 1px solid #DDD;
    margin-bottom: 20px;
    border-collapse: collapse;
    empty-cells: show;
    background: #EEE;
    width: 733px;
}
.megakrut th {
    width: 200px;
    vertical-align: top;
    padding: 10px;
}
.megakrut th img {
    cursor: pointer;
    border-radius: 5px;
}
.megakrut td {
    padding: 10px 10px 0 10px;
    vertical-align: top;
}
.megakrut td.mozaic {
    padding: 0 10px 10px 10px;
    vertical-align: top;
    overflow: hidden;
    text-align: left;
}
.megakrut td.mozaic img {
    border-radius: 5px;
    width: 134px;
    margin-right: 5px;
}
.megakrut h1 {
    margin: 0;
    padding: 0;
    line-height: 100%;
    color: blue;
}
.megakrut p {
    margin: 10px 0;
    padding: 0;
}
.megakrut p.authors {
    font-weight: bold;
    color: red;
}
.megakrut td.about {
    background: #DDD;
    padding: 5px;
    color: #555;
    text-align: right;
    font-size: .9em;
}
.megakrut td.about b {
    font-weight: normal;
    padding: 0 5px 0 5px;
}