JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapperA">
    <div class="contentB">
    <div id="portfolio-topSection">
        <a href="#" class="categoryButton-All">All</a>    
        <a href="#" class="categoryButton-VisualIdentity">Visual Identity</a>	
        <a href="#" class="categoryButton-Photography">Photography</a>		
        </div>
    </div>
</div>

<div class="wrapperB">
    <div class="content">
        <div id="portfolio-gallerySection">
            <div class="grid">
                
                <div class="itemWrapper categoryAll">	<a href="index.html"><img alt="" src="assets/images/me.png"></a>
	<span><p>Click To View Project</p></span>

                </div>
                <div class="itemWrapper categoryWebDesign">	<a href="index.html"><img alt="" src="assets/images/11.png"></a>
	<span><p>Click To View Project</p></span>

                </div>
            </div>
            <div class="grid">
                <div class="itemWrapper categoryVisualIdentity">	<a href="index.html"><img alt="" src="assets/images/me.png"></a>
	<span><p>Click To View Project</p></span>

                </div>
                <div class="itemWrapper categoryPhotography">	<a href="index.html"><img alt="" src="assets/images/me.png"></a>
	<span><p>Click To View Project</p></span>

                </div>
            </div>
            <div class="grid">
                <div class="itemWrapper category-WebDesign">	<a href="index.html"><img alt="" src="assets/images/11.png"></a>
	<span><p>Click To View Project</p></span>

                </div>
                <div class="itemWrapper category-WebDesign">	<a href="index.html"><img alt="" src="assets/images/me.png"></a>
	<span><p>Click To View Project</p></span>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

/*Portoflio Page---*/
 #portfolio-topSection {
    margin: 10px 15px;
}
#portfolio-topSection a {
    color: #DFE4EB;
    border-radius: 3px;
    padding: 10px 15px;
    margin: 0 5px;
}
#portfolio-topSection a:hover {
    color: #A4B1C4;
}
.portfolio-topSectionClicked {
    color: #889AB3;
    background-color: #536C90;
}
/*Portoflio Gallery Section*/
 #portfolio-gallerySection .grid {
    display: inline-block;
    vertical-align: top;
    width: 33.05%;
}
.itemWrapper {
    position: relative;
    overflow: hidden;
    margin: 2px 1px;
}
.itemWrapper span {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(../elements/magnifying-glass.png) center center no-repeat rgba(69, 96, 135, .85);
    cursor: pointer;
    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}