JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 99%; margin: 0; padding: 0; text-align: left; overflow: hidden;">
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mPra" lang="is" class="mainHolder imgPra">
            <figure>
                <figcaption class="fig11">Group Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mPro" lang="is" class="mainHolder imgPro">
            <figure>
                <figcaption class="fig11">Provider Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mSit" lang="is" class="mainHolder imgSit">
            <figure>
                <figcaption class="fig11">Site Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <br style="clear: both;" />
    <div style="width: 50%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mCli" lang="is" class="mainHolder imgCli">
            <figure>
                <figcaption class="fig11">Client Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <div style="width: 50%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mAcc" lang="is" class="mainHolder imgAcc">
            <figure>
                <figcaption class="fig11">Accountable Party Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
</div>

CSS

.mainHolder {
    	    width: 200px;
    	    height: 200px;
    	    overflow: hidden;
    	    margin: 0 auto;
    	}
    	.mainHolder figure {
    	    width: 200px;
    	    height: 200px;
    	    overflow: hidden;
    	    position: relative;
    margin: 0;
    padding: 0;
    	}
    	.mainHolder figcaption.fig11 {
    	    position: absolute;
    	    display: block;
    	    width: 350px;
    	    height: 50px;
    	    left: -30px;
    	    bottom: 30px;
    	    /*left: 110px;
	bottom: -110px;*/
    	    text-align: center;
    	    color: #fff;
    	    background-color: rgba(26, 54, 59, 0.8);
    	    border: 3px solid rgba(62, 116, 126, 0.6);
    	    line-height: 50px;
    	    -moz-box-shadow: rgba(0, 0, 0, .5) 0 2px 8px;
    	    -webkit-box-shadow: rgba(0, 0, 0, .5) 0 2px 8px;
    	    box-shadow: rgba(0, 0, 0, .5) 0 2px 8px;
    	    -moz-transform:rotate(-45deg);
    	    -webkit-transform:rotate(-45deg);
    	    -o-transform:rotate(-45deg);
    	    transform:rotate(-45deg);
    	    -moz-transition: bottom .5s ease-out, left .5s ease-out;
    	    -webkit-transition: bottom .5s ease-out, left .5s ease-out;
    	    -o-transition: bottom .5s ease-out, left .5s ease-out;
    	    transition: bottom .5s ease-out, left .5s ease-out;
    	}
    	.mainHolder figcaption.fig22 {
    	    position: absolute;
    	    display: block;
    	    width: 350px;
    	    height: 50px;
    	    left: -300px;
    	    top: -110px;
    	    text-align: center;
    	    color: #fff;
    	    background-color: rgba(26, 54, 59, 0.8);
    	    border: 3px solid rgba(62, 116, 126, 0.6);
    	    line-height: 50px;
    	    -moz-box-shadow: rgba(0, 0, 0, .5) 0 2px 8px;
    	    -webkit-box-shadow: rgba(0, 0, 0, .5) 0 2px 8px;
    	    box-shadow: rgba(0, 0, 0, .5) 0 2px 8px;
    	    -moz-transform:rotate(-45deg);
    	    -webkit-transform:rotate(-45deg);
    	    -o-transform:rotate(-45deg);
    	    transform:rotate(-45deg);
    	    -moz-transition: top .5s...