JSFiddle - React, Tailwind, and code Playground

HTML

<div class="work_items_wrapper">
    <a class="work_item_link" href="#">
        <div class="spinner"></div>
        <img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
    </a>
        
        <a class="work_item_link" href="#">
            <div class="spinner"></div>
            <img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
        </a>
            
          <a class="work_item_link_no_margin" href="#">
            <div class="spinner"></div>
            <img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
        </a>
</div>

SCSS

.work_items_wrapper{
    margin: 2.8em auto;
}

.work_item_link{
    position: relative;
    width: 32%;
    height: auto;
    float: left;
    margin-right: 2%;
    overflow: hidden;
    
    img{
        width: 100%;
        display: block;
    }
}

.work_item_link_no_margin{
    position: relative;
    width: 32%;
    height: auto;
    float: left;
    overflow: hidden;
    
    img{
        width: 100%;
        display: block;
    }
}

.spinner{
    width: 5em;
    height: 5em;
    background: red;
    position: absolute;
}

JavaScript

$('img').on('load', function() {
    $(this).prev("div").removeClass("spinner");
}).each(function() {
    if(this.complete) $(this).load();
});