JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<div class="row">
        <div class="category width33 vertical-separator">
            <div class="spacer">
                <h2>
                    <a href="#" title="Ceiling">Ceiling<br />
                        <img src="http://coding4web.ru/wp-content/uploads/bular/potolok26_200x200.jpg" alt="Ceiling" />
                    </a>
                </h2>
            </div>
        </div><div class="category width33 vertical-separator">
            <div class="spacer">
                <h2>
                    <a href="#" title="Walls">Walls blablabla bla bla bla<br />
                        <img src="http://coding4web.ru/wp-content/uploads/bular/stena9_200x200.jpg" alt="stenovye-paneli" />
                    </a>
                </h2>
            </div>
        </div><div class="category width33 ">
            <div class="spacer">
                <h2>
                    <a href="#" title="Lights">Lights<br />
                        <img src="http://coding4web.ru/wp-content/uploads/bular/svet7_200x200.jpg" alt="lights" />
                    </a>
                </h2>
            </div>
        </div>
    </div>

CSS

.floatleft, span.floatleft
{
    float: left;
}

.width33
{
    width: 33%;
}

.row
{
    width: 510px;
}

.spacer
{
    padding: 6px;
}

    .spacer img
    {
        margin-top: 6px;
        max-width: 100%;
        height: auto;
    }

.row > div
{
    display: inline-block;
    vertical-align: bottom;
}