JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div id="boxes">
    <a id="about1" class="aboutbox" href="/property-for-sale">&nbsp;</a>  
    <a id="about2" class="aboutbox" href="/why-cyprus">&nbsp;</a>  
    <a id="about3" class="aboutbox" href="/why-zantis">&nbsp;</a>  
    <span class="stretch">&nbsp; 

</span>

</div>

CSS

#boxes {
	padding: 70px 0 70px 0;
	text-align: justify;
	-ms-text-justify: distribute-all-lines;
	text-justify: distribute-all-lines;
}

#boxes a{
    display:inline-block;
    width:33%;
    
}
.aboutbox {
    padding: 0;
    margin: 0;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 100%;
    height: auto;
    vertical-align: top;
    text-align: left;
    background-size: auto auto;
}
#about1 {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about2 {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about3 {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about1:hover {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about2:hover {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about3:hover {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}