JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tab">
    <li>
        <a class="tabimg gq-module-hover tilt" tabindex="0" data-about="Newborns"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_0095.jpg" alt="">Newborns</a>
    </li>
    <li>
        <a class="tabimg gq-module-hover" tabindex="1" data-about="Children"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8252.jpg" alt="">Children</a>
    </li>
    <li>
        <a class="tabimg gq-module-hover" tabindex="2" data-about="Families"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8607.jpg" alt="">Families</a>
    </li>
    <li>
        <a class="tabimg gq-module-hover" tabindex="3" data-about="Lifestyle"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_6620.jpg" alt="">Lifestyle</a>
    </li>
</ul>

CSS

/* Style the list */

ul.tab {
    whitespace: nowrap;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
}


/* Style the a tags */

ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    -webkit-filter: grayscale(50%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(50%);
}


/* Change background color of links on hover */

ul.tab li a:hover {
    background-color: #000000;
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
    z-index: 1;
    -webkit-filter: grayscale(0%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


/* Create an active/current tablink class */

ul.tab li a:focus,
.active {
    background-color: #ccc;
    -webkit-filter: grayscale(0%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


/* Style the tab content */

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}


/*style the images*/

.tabimg {
    box-sizing: border-box;
}

.tab {
    font-size: 0;
    /* To get rid of the space below the li tags */
    display: inline-block;
    /* change this to display: block; in order to make the container as wide as the page is */
    box-sizing: border-box;
    overflow: hidden;
    /* to clear the float */
}

.tab li {
    box-sizing: border-box;
    float: left;
    width: 25%;
}

.tab li a {
    width: 100%;
    /* remove this if you dont want the images to resize if the container is as wide as the page (if .tab is display: block;*) */
}

.tab li img {
    width: 100%;
    display: block;
    box-sizing: border-box;
}

JavaScript

/* Simple foreach as the js foreach method is not supported by IE9 and you may want to support it.
    CanIUse: http://caniuse.com/#search=foreach */
function simpleForEach(array, callback) {
    for (var i = 0; i < array.length; i++) {
        callback(array[i], i);
    }
}

/* Parts of this can be done with pure css.
This function should executed on load:
    document.addEventListener("load", load);
or on DOMContentLoaded:
    document.addEventListener("DOMContentLoaded", load);
CanIUse: http://caniuse.com/#search=DOMContentLoaded. */

jQuery(document).ready(function() {
    var tabimgs = document.getElementsByClassName("tabimg");

    // for each tabimg
    simpleForEach(tabimgs, function(tabimg) {
        var cityName = tabimg.getAttribute("data-about");

        // add the click event listener
        tabimg.addEventListener("click", function(evt) {
            // onclick do:

            // hide all tabcontents
            simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) {
                tc.style.display = "none";
            });

            // remove the active class
            simpleForEach(document.getElementsByClassName("tabimg"), function(ti) {
                ti.className = ti.className.replace(" active", "");
            });

            // show the current tab, and add "active" class to the link that opened the tab
            document.getElementById(cityName);
            tabimg.className += " active";
        });
    });
});