JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<ul class="kittens">
    <li>
        <figure>
            <img src="http://placekitten.com/g/200/100" alt="kitten meow" />
        </figure>
        <a href="#">
            <p>Well, Hi</p>
        </a>
    </li>
     <li>
        <figure>
            <img src="http://placekitten.com/g/200/100" alt="kitten meow" />
        </figure>
        <a href="#">
            <p>Hello there</p>
        </a>
    </li>   <li>
        <figure>
            <img src="http://placekitten.com/g/200/100" alt="kitten meow" />
        </figure>
        <a href="#">
            <p>I'm a kitten</p>
        </a>
    </li>
    <li>
        <figure>
            <img src="http://placekitten.com/g/200/100" alt="kitten meow" />
        </figure>
        <a href="#">
            <p>Meow</p>
        </a>
    </li>
</ul>

CSS

* { margin: 0; padding: 0; }


body { max-width: 660px; width: 100%; margin: 50px auto;}

img {max-width:100%;height:auto; }

.kittens li { position: relative; display:inline;float:left; width:23%; margin-left:1%; margin-right:1%; }

.kittens li a { position: absolute; background: white; bottom: 25%; color: #333; text-decoration: none; padding-right: 3%; }


@media only screen and (max-width: 320px) {
body {font-size: 80%;}
}