JSFiddle - React, Tailwind, and code Playground

HTML

<div class="class clearfix">
        <div>
            <img src="http://lorempixel.com/150/200/abstract" alt="">
            <a href="#">Lorem ipsum dolor.</a>
            <span>Lorem ipsum.</span>
        </div>
        <div>
            <img src="http://lorempixel.com/150/200/sity" alt="">
            <a href="#">Veniam placeat ut?</a>
            <span>Commodi eum.</span>
        </div>
        <div>
            <img src="http://lorempixel.com/150/200/nightlife" alt="">
            <a href="#">Adipisci id recusandae.</a>
            <span>Porro sed.</span>
        </div>
        <div>
            <img src="http://lorempixel.com/150/200/nature" alt="">
            <a href="#">Mollitia distinctio labore.</a>
            <span>Eos dicta.</span>
        </div>
        <div>
            <img src="http://lorempixel.com/150/200/sports" alt="">
            <a href="#">Necessitatibus repellat officiis!</a>
            <span>Voluptates alias.</span>
        </div>
        <div>
            <img src="http://lorempixel.com/150/200/technics" alt="">
            <a href="#">Iure numquam velit.</a>
            <span>Ex molestias.</span>
        </div>
        <div>
            <img src="http://lorempixel.com/150/200/people" alt="">
            <a href="#">Quia nostrum incidunt.</a>
            <span>Tenetur modi!</span>
        </div>
        <div>
            <img src="http://lorempixel.com/150/200/food" alt="">
            <a href="#">Sed voluptatem quas.</a>
            <span>Laudantium corporis?</span>
        </div>
    </div><!-- .class -->

CSS

body {
        width: 700px;
        margin: 0 auto;
    }
    .clearfix:before, 
    .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { *zoom: 1; } 
    .class div {
        width: 150px;
        height: 260px;
        margin: 10px;
        float: left;
    }
    .class div img,
    .class div a {
        display: block;
        margin-bottom: 5px;
    }