JSFiddle - React, Tailwind, and code Playground

by Alex83

HTML

<article class="post">
                <h2 class="postTitle"> Оптимизация страниц сайта</h2>
                <p class="postInfo">Создана <time datetime="2011-06-14" class="postDate">14.06.2011</time>, Категория <a href="javascript:void(0)" class="postLink">Статьи</a>, by <a href="javascript:void(0)" class="postLink">babanovd</a></p>
                <div class="postImg">
                    
                </div>
                <p class="postText">Любой сайт состоит из нескольких (десятков, сотен, тысяч) страниц. Любая страница — это некий HTML-код. HTML-код, в свою очередь, — это набор тегов, из которых и формируется страница.Оптимизация страниц — важнейший этап в продвижении сайта. Его можно разбить на следующие шаги.</p>
                <a href="javascript:void(0)" class="postFullLink">Продолжить</a>
            </article> <!-- /article-->

<article class="post">
                <h2 class="postTitle"> Оптимизация страниц сайта</h2>
                <p class="postInfo">Создана <time datetime="2011-06-14" class="postDate">14.06.2011</time>, Категория <a href="javascript:void(0)" class="postLink">Статьи</a>, by <a href="javascript:void(0)" class="postLink">babanovd</a></p>
                <div class="postImg">
                    
                </div>
                <p class="postText">Любой сайт состоит из нескольких (десятков, сотен, тысяч) страниц. Любая страница — это некий HTML-код. HTML-код, в свою очередь, — это набор тегов, из которых и формируется страница.Оптимизация страниц — важнейший этап в продвижении сайта. Его можно разбить на следующие шаги.</p>
                <a href="javascript:void(0)" class="postFullLink">Продолжить</a>
            </article> <!-- /article-->

CSS

.postImg { float: left; width: 200px; height: 200px; background: silver; }

.post:after {
    content: "";
    height: 0;
    display: block;
    clear: left;
}