JSFiddle - React, Tailwind, and code Playground

by Pav KR

HTML

<ul>
    <li>
        <a href=""><img src="http://deckdoctors.net/images/gallery/bay-area-deck-03_thumb.jpg" /></a>
    </li>
    <li>
        <a href=""><img src="http://deckdoctors.net/images/gallery/bay-area-deck-02_thumb.jpg" /></a>
    </li>
    <li>
        <a href=""><img src="http://deckdoctors.net/images/gallery/bay-area-deck-05_thumb.jpg" /></a>
    </li>
    <li>
        <a href=""><img src="http://deckdoctors.net/images/gallery/bay-area-deck-17_thumb.JPG" /></a>
    </li>
</ul>

CSS

ul {overflow: hidden; /* height: 1% for IE6, 7, 8 */; margin: 0; padding: 0}
ul li {float: left; width: 25%; list-style: none; margin: 0; padding: 0}
ul li a {display: block}
ul li a img {display: block; width: 100%; /* or max-width: 100% to stop images from scaling up*/}