JSFiddle - React, Tailwind, and code Playground

by Zacc206

HTML

<a href="#">A
    <div class="float">
        <div>
            <img src="http://lorempixel.com/200/200/food"/>
        </div>
    </div>
</a>

<a href="#">
    <img src="http://lorempixel.com/200/200/sports"/>
</a>

<a href="#" class="tile-anchor">
    <div class="tile">
        <div class="content">
            <img src="http://lorempixel.com/200/200/animals"/>
        </div>
    </div>
    <a href="#"></a>
</a>

<a href="#" class="tile-anchor">
    <div class="tile">
        <div class="content">
            <img src="http://lorempixel.com/200/200/animals"/>
        </div>
    </div>
</a>

CSS

.float{
    display: float;
}

.tile-anchor{
    height: 150px;                            
    width: 150px;
    margin: 10px;
}

.tile{
    position: relative;
    float: left;
    height: 150px;
    width: 150px;
}

.content{
    width: 150px;
    height: 150px;
    display: table-cell;
    vertical-align: middle;
    margin-left: 0px;
    margin-right: auto;
    text-align: center;
}