JSFiddle - React, Tailwind, and code Playground

HTML

<main id="content" role="main">
    <section id="project_list">
        <div id="project_thumbnails">
            <ul>
                <li>
                    <div class="overlay">	<a href="#" class="view_project">View Project</a>

                    </div>
                    <img src="https://placeit.net/uploads/stage/stage_image/427/small_IMG_3839_base_2.jpg" />
                </li>
                <li>
                    <div class="overlay">	<a href="#" class="view_project">View Project</a>

                    </div>
                    <img src="https://placeit.net/uploads/stage/stage_image/427/small_IMG_3839_base_2.jpg" />
                </li>
                <li>
                    <div class="overlay">	<a href="#" class="view_project">View Project</a>

                    </div>
                    <img src="https://placeit.net/uploads/stage/stage_image/427/small_IMG_3839_base_2.jpg" />
                </li>
                <li>
                    <div class="overlay">	<a href="#" class="view_project">View Project</a>

                    </div>
                    <img src="https://placeit.net/uploads/stage/stage_image/427/small_IMG_3839_base_2.jpg" />
                </li>
                <li>
                    <div class="overlay">	<a href="#" class="view_project">View Project</a>

                    </div>
                    <img src="https://placeit.net/uploads/stage/stage_image/427/small_IMG_3839_base_2.jpg" />
                </li>
                <li>
                    <div class="overlay">	<a href="#" class="view_project">View Project</a>

                    </div>
                    <img src="https://placeit.net/uploads/stage/stage_image/427/small_IMG_3839_base_2.jpg" />
                </li>
                <li>
                    <div class="overlay">	<a href="#" class="view_project">View Project</a>

                    </div>
                    <img...

CSS

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> CSS RESET */
 * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: top;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> MY STYLES */
 main {
    display: inline-block;
    width: 100%;
}
#project_list {
    width: 100%;
}
#project_thumbnails {
    width: 100%;
}
#project_thumbnails ul li {
    float: left;
    list-style-type: none;
    position: relative;
    width: 33.333%;
}
.overlay {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.view_project {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
    font-family: Arial;
    padding: 12px 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    
}

#project_thumbnails img {
    width: 100%;
}

JavaScript

$(document).ready(function(){	
    $(window).resize(function () {
	    $('.view_project').each(function (event) {
	        $(this).css({
	            "margin-top": -(($(this).outerHeight() / 2)),
	            "margin-left": -(($(this).outerWidth() / 2))
	        });
	    });
	}).resize();
})