JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<div class="personnal-work">
    <div class="image-land-div"><a href="#"><img src="http://www.darrenmorton.com/photography/personnal/bermuda-tn.jpg" alt="" class="image-land" /></a></div>
    <div class="image-land-div"><a href="#"><img src="http://www.darrenmorton.com/photography/personnal/bermuda-tn.jpg" alt="" class="image-land" /></a></div>
    <div class="image-land-div"><a href="#"><img src="http://www.darrenmorton.com/photography/personnal/bermuda-tn.jpg" alt="" class="image-land" /></a></div>
    <div class="image-land-div"><a href="#"><img src="http://www.darrenmorton.com/photography/personnal/bermuda-tn.jpg" alt="" class="image-land" /></a></div>
    <div style="clear: both"></div>
</div>

CSS

.personnal-work{position: relative; margin:0px auto; width: 100%; max-width: 843px; height: 400px; margin-top: 20px; border: 1px solid red;}
	  .image-land-div{width: 24%; max-width: 194px; margin-left: 1%; float: left; display: inline; border: 1px solid white;-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */-moz-box-sizing: border-box;    /* Firefox, other Gecko */	box-sizing: border-box;         /* Opera/IE 8+ */}
	  .image-land{width: 100%; display: inline; height: 100%;vertical-align:middle;}
	  .image-land-div:hover{border: 1px solid #bc2021; }