JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="galleryArea">
        <ul id="gallery">
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
            <li><a href="#">
                <img src="img.png">
                <p>Desc...</p>
            </a></li>
        </ul>
    </div>
</body>

CSS

#galleryArea {
    text-align: center;
}

#gallery {
    display: inline-block;
    list-style:none;
    margin: 0;
    padding: 0;
    width: 90%;
}

#gallery img {
    height: auto;
    max-height: 250px;
    max-width: 250px;
    width: 100%;
}

#gallery li {
    float: left;
    margin: 0 1.6%;
    text-align: center;
    width: 21.8%;
}

#gallery a {
    color: black;
    display: block;
}