JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <link rel="stylesheet" href="demo.css" />
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
    <div class="articles">
        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку Предлагаю нажать на картинку Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>

        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>

        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>
        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>

        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>

        <article>
            <figure>
                <img src="{image-1}" alt="{title}" />
                <figcaption>
                    <a href="{full-link}">Предлагаю нажать на картинку</a>
                </figcaption>
            </figure>
        </article>
    </div>
</body>
</html>

CSS

body, figure {
    margin:0;

    padding:0;    
}
.articles {
    padding:25px;
    width:850px;
    margin:0 auto;
}
.articles:after,
.articles:before {
    content:"";
    display:table;
}
.articles:after {
    clear:both;
}
figure {
    position:relative;
    float:left;
    width:280px;
    height:200px;
    overflow:hidden;
    margin:0 2px 2px 0;
    background:#ccc;
}
figure img {
    min-width:100%;
    min-height:100%;
}
figure:hover > figcaption {
    display:block;
}
figcaption {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(81,133,185,.85);
    line-height:200px;
}
figcaption a {
    color:#fff;
    width:100%;
    height:100%;
    display:block;
    font-size:14px;
    font-weight:bold;
    font-family:Arial;
    text-align:center;
    vertical-align:middle;
}
figcaption a:hover {
    text-decoration:none;
}