JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gridContainer">
    <div class="gridItem listViewSingleLink" itemtitle="headerbackground.jpg" item="50568e2f0353dc0121000001">
        <div class="checkbox">
            <input id="check0" type="checkbox" value="check0">
            <label for="check0"></label>
        </div>
        <div class="itemImage">
            <img src="http://www.shannonhochkins.com/_images/513330a8965f59b83a00034d" width="100%">
        </div>
        <hr>
        <table>
            <tbody>
                <tr class="itemName">
                    <td colspan="2">headerbackground.jpg</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="gridItem listViewSingleLink" itemtitle="headerimage.jpg" item="50568e310353dc0621000001">
        <div class="checkbox">
            <input id="check1" type="checkbox" value="check1">
            <label for="check1"></label>
        </div>
        <div class="itemImage">
            <img src="http://www.shannonhochkins.com/_images/51403bfc965f59c067000236" width="100%">
        </div>
        <hr>
        <table>
            <tbody>
                <tr class="itemName">
                    <td colspan="2">headerimage.jpg</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="gridItem listViewSingleLink" itemtitle="logo.png" item="50568e340353dc0421000001">
        <div class="checkbox">
            <input id="check2" type="checkbox" value="check2">
            <label for="check2"></label>
        </div>
        <div class="itemImage">
            <img src="http://www.shannonhochkins.com/_images/51061320965f59707b000c55" width="100%">
        </div>
        <hr>
        <table>
            <tbody>
                <tr class="itemName">
                    <td colspan="2">logo.png</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="gridItem listViewSingleLink" itemtitle="featuredcontainer.jpg" item="505695be0353dc0321000009">
    ...

CSS

.gridContainer {
    width:100%;
    margin-bottom:40px;
    display:inline-block;
    vertical-align:baseline;
    zoom:1;
    *display:inline;
    *vertical-align:auto
}
.gridItem {
    float:left;
    position:relative;
    border:1px solid #d2d2d2;
    margin:0.5% 1% 0.5% 0;
    padding:1.8%;
    overflow:hidden
}
.gridItem:hover {
    background-color:rgba(240, 240, 240, 0.5);
    color:#323232;
    cursor:pointer
}
.gridItem .checkbox {
    position:absolute;
    top:0px;
    left:10px;
    z-index:9
}
.gridItem .checkbox label {
    margin:0;
    padding:0
}
.gridItem .itemImage {
    width:96%;
    margin:2px auto;
    position:relative;
    overflow:hidden;
    height:200px
}
.gridItem .itemImage img {
    width:auto;
    min-width:100%;
    min-height:100%
}
.gridItem hr {
    margin:20px 0 10px 0
}
.gridItem .status {
    height:30px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    color:#fff;
    text-transform:uppercase;
    text-align:center;
    line-height:30px;
    font-weight:bold
}
.gridItem tr td, .gridItem tr th {
    height:14px;
    line-height:14px;
    padding:5px 0;
    white-space:nowrap
}
.gridItem tr {
    width:100%;
    margin:0;
    font-size:12px
}
.gridItem tr th {
    color:#849daa;
    text-align:left;
    padding-right:10px
}
.gridItem .itemName {
    font-weight:bold
}
img {
    vertical-align: middle;
}
@media only screen and (max-width: 1100px) {
    .gridItem {
        width:28.4%
    }
}
@media only screen and (min-width: 1101px) and (max-width: 1349px) {
    .gridItem {
        width:20.9%;
        padding:1.4%
    }
}
@media only screen and (min-width: 1351px) and (max-width: 1599px) {
    .gridItem {
        width:16.8%;
        padding:1%
    }
}
@media only screen and (min-width: 1600px) {
    .gridItem {
        width:13.9%;
        padding:0.8%
    }
}
@media only screen and (max-width: 1100px) {
    .gridItem .itemImage {
        height:180px
    }
}
@media only screen and (min-width:...