JSFiddle - React, Tailwind, and code Playground

HTML

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

        </ul>
</div>

CSS

#galleryArea {
    display: block;
    width: 90%;
    margin-left: auto;
}
#gallery {
    list-style:none;
}
#gallery img {
    width: 100%;
    height: auto;
    max-width: 250px;
    max-height: 250px;
}
#gallery li {
    float: left;
    width: 25%;
    margin: 0 1.6%;
    text-align: center;
}
#gallery a {
    color: black;
}

ul{
    margin-left:auto;
    margin-right:auto;
    
}