JSFiddle - React, Tailwind, and code Playground

HTML

<a class="griditem" href="#"
  style="
    background-image: url(http://www.gravatar.com/avatar/b7e5fd5f16fc6e3e723038d961558995?s=512&d=identicon&r=PG);
  "
>
    <span class="titles">
        <span class="name">Unicomp Studios</span>
        <span class="title">Springs Buckling (2012)</span>
    </span>
</a>
<a class="griditem" href="#"
  style="
    background-image: url(http://www.gravatar.com/avatar/b7e5fd5f16fc6e3e723038d961558995?s=64&d=identicon&r=PG);
  "
>
    <span class="titles">
        <span class="name">Name</span>
        <span class="title">Title</span>
    </span>
</a>

<a class="griditem" href="#"
  style="
    background-image: url(http://www.gravatar.com/avatar/b7e5fd5f16fc6e3e723038d961558995?s=64&d=identicon&r=PG);
  "
>
    <span class="titles">
        <span class="name">Name</span>
        <span class="title">Title</span>
    </span>
</a>
<a class="griditem" href="#"
  style="
    background-image: url(http://www.gravatar.com/avatar/b7e5fd5f16fc6e3e723038d961558995?s=64&d=identicon&r=PG);
  "
>
    <span class="titles">
        <span class="name">Name</span>
        <span class="title">Title</span>
    </span>
</a>

<a class="griditem" href="#"
  style="
    background-image: url(http://www.gravatar.com/avatar/b7e5fd5f16fc6e3e723038d961558995?s=64&d=identicon&r=PG);
  "
>
    <span class="titles">
        <span class="name">Name</span>
        <span class="title">Title</span>
    </span>
</a>

<a class="griditem" href="#"
  style="
    background-image: url(http://www.gravatar.com/avatar/b7e5fd5f16fc6e3e723038d961558995?s=64&d=identicon&r=PG);
  "
>
    <span class="titles">
        <span class="name">Name</span>
        <span class="title">Title</span>
    </span>
</a>

<a class="griditem" href="#"
  style="
    background-image: url(http://www.gravatar.com/avatar/b7e5fd5f16fc6e3e723038d961558995?s=64&d=identicon&r=PG);
  "
>
    <span class="titles">
        <span class="name">Name</span>
        <span class="title">Title</span>
   ...

CSS

.griditem {
    float: left;
    margin-right:  17px;
    margin-bottom: 17px;
    min-width:  100px; /* extremely narrow blocks ==> crap looking */
    width: 30%;
    background: blue no-repeat;
    background-size: contain; /* from IE9 only: https://developer.mozilla.org/en/CSS/background-size */
    border: 1px solid transparent; /* prevent .titles:margin-top's margin collapse */
}
.titles {
    /* <a> elements must only have inline elements like img, span.
       divs, headers, etc are forbidden, because some browsers will display a big mess (safari) */
    display: block; /* so display those inline elements as blocks */
    padding: 5px;
    margin: 0 auto;
    margin-top: 105%;
    background: yellow;
}
.titles > span {
    display: block;
}