JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div id="gallery">
    <ul>
        <li>
            <div class="gallery-image">	<a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>

            </div>
        </li>
        <li>
            <div class="gallery-image">	<a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>

            </div>
        </li>
        <li>
            <div class="gallery-image">	<a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>

            </div>
        </li>
        <li>
            <div class="gallery-image">	<a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>

            </div>
        </li>
        <li>
            <div class="gallery-image">	<a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>

            </div>
        </li>
        <li>
            <div class="gallery-image">	<a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>

            </div>
        </li>
        <li>
            <div class="gallery-image">	<a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>

            </div>
        </li>
        <li>
            <div class="gallery-image">	<a href=""><img src="http://lorempixel.com/output/nature-q-c-340-220-7.jpg"/>
                <p>A Movie in the Park:<br />Kung Fu Panda</p></a>

            </div>
        </li>
        <li>
            <div class="gallery-image">	<a href=""><img...

CSS

#gallery {
    width:100%;
    margin-right:auto;
    margin-left:auto;
    margin-top:45px;
    position:relative;
}
#gallery li {
    list-style-type:none;
    position:relative;
    float:left;
    width:30%;
    margin:1.66%;
}
#gallery ul p {
    position:absolute;
    top:0;
}
#gallery ul img {
    position: relative;
    width: 100%;
    background-position:center center;
    background-repeat:no-repeat;
}