JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="banner">
        <a href="some-page.html">
            <img src="http://www.traceinternational.org/images/loading4.gif" alt="Some description" />
        </a>
    </div>
    <div class="banner">
        <a href="some-page.html">
            <img src="http://www.traceinternational.org/images/loading4.gif" alt="Some description" />
        </a>
    </div>
    <div class="banner">
        <a href="some-page.html">
            <img src="http://www.traceinternational.org/images/loading4.gif" alt="Some description" />
        </a>
    </div>
    <div class="clearer"></div>
</div>

CSS

body {
    background-color: #feefef;
}

/* Denne omkranser alle bannere */
.wrapper {
    width: 600px;
    margin: 10px auto;
    background-color: white;
}

/* Dette er hver banner */
.banner {
    width: 276px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #aaa;
    background: #bbb;
    float: left;
}

.banner a {
    display: block; 
    width: 100%;
}

.banner a img {
    border: 0;
    background: #c0c0c0;
    width: 50%;
    margin: 0px auto;
    display: block;
}

.banner:hover,
.banner:focus {
    border: 1px solid #ccc;
    background: #eee;
}

/* Utility klasser */
.clearer {
    clear: both;
}