JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<ul class="kittens">
    <li>
        <figure>
            <img src="http://placekitten.com/g/200/600" alt="kitten meow" />
        </figure>
        <a href="#">
            <p>Well, Hi</p>
        </a>
    </li>
     <li>
        <figure>
            <img src="http://placekitten.com/g/200/400" alt="kitten meow" />
        </figure>
        <a href="#">
            <p>Hello there</p>
        </a>
    </li>   <li>
        <figure>
            <img src="http://placekitten.com/g/200/200" 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 { background: #000; min-height: 700px; position: relative; display:inline;float:left; width:23%; margin-left:1%; margin-right:1%; }
.kittens li a { position: absolute; background: white; top: 0%; color: #333; text-decoration: none; padding: 3%; font: 90% sans-serif; }
/* kitten sized media queries */
@media only screen and (max-width: 300px) {.kittens li a{font-size: 80%;padding:0%;}}
@media only screen and (max-width: 200px) {.kittens li a {font-size: 60%;padding:0%;}}
@media only screen and (max-width: 100px) {.kittens li a {font-size: 40%;padding:0%;}}
/* meow */