JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<section class="kittens">
     <h1>Kittens</h1>

    <figure>
        <img src="http://placekitten.com/150/200?image=1" alt="Kitten 1" />
        <figcaption>Bacon ipsum dolor sit amet short ribs pork chop pork belly spare ribs
            shoulder tri-tip beef ribs turkey brisket short loin tenderloin ground
            round.</figcaption>
    </figure>
    <figure>
        <img src="http://placekitten.com/150/200?image=2" alt="Kitten 2" />
        <figcaption>Short ribs cow corned beef, beef tenderloin swine biltong short loin.</figcaption>
    </figure>
    <figure>
        <img src="http://placekitten.com/150/200?image=3" alt="Kitten 3" />
        <figcaption>Boudin chuck ground round, pig pastrami salami turkey ham hock beef ribs
            tongue.</figcaption>
    </figure>
    <figure>
        <img src="http://placekitten.com/150/200?image=4" alt="Kitten 4" />
        <figcaption>Tri-tip pork loin tongue corned beef shankle ball tip.</figcaption>
    </figure>
    <figure>
        <img src="http://placekitten.com/150/200?image=5" alt="Kitten 5" />
        <figcaption>Turkey swine tenderloin spare ribs sausage filet mignon hamburger. Leberkas
            andouille prosciutto, bresaola tri-tip short loin meatloaf shank pig shoulder
            spare ribs ribeye.</figcaption>
    </figure>
    <figure>
        <img src="http://placekitten.com/150/200?image=6" alt="Kitten 6" />
        <figcaption>Pastrami andouille tongue tri-tip jerky.</figcaption>
    </figure>
    <figure>
        <img src="http://placekitten.com/150/200?image=1" alt="Kitten 1" />
        <figcaption>Bacon ipsum dolor sit amet short ribs pork chop pork belly spare ribs
            shoulder tri-tip beef ribs turkey brisket short loin tenderloin ground
            round.</figcaption>
    </figure>
    <figure>
        <img src="http://placekitten.com/150/200?image=2" alt="Kitten 2" />
        <figcaption>Short ribs cow corned beef, beef tenderloin swine biltong short loin.</figcaption>
   ...

CSS

* {
        margin: 0;
        padding: 0;
    }
    h1 {
        margin-bottom: 1em;
        margin-top: .5em;
    }
    .kittens {
        width: 400px;
        border: solid #000 1px;
        overflow: auto;
        margin: 1em auto;
        padding: 1%;
    }
    figure {
        width: 30%;
        float: left;
        margin-left: 1%;
        font-size: small;
        outline: solid #999 1px;
    }
    img {
        max-width: 100%;
    }
    figure:nth-of-type(3n+1) {
        clear:left;
    }