JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section-global">
                	<p class="red"> HELLO </p>
                    <p>
                    	<ul class="image-global">
                            <li>
                            	<img src="assets/images/welcome.jpg" />
                                <p> ABC </p>
                            </li>
                            <li>
                            	<img src="assets/images/welcome.jpg" />
                                <p> ABC </p>
                            </li>
                            <li>
                            	<img src="assets/images/welcome.jpg" />
                                <p> ABC </p>
                            </li>
                            <li>
                            	<img src="assets/images/welcome.jpg" />
                                <p> ABC </p>
                            </li>
                        </ul>
                    </p>
                </div>

CSS

.section-global {
	margin:10px 0;
	border:1px solid #F63;
	overflow:hidden;
}

.section-global p {
	padding:10px;
}

.image-global {
	text-align:center;
}

.image-global li {
	display:inline-block;
    margin-right: -4px;
}

.image-global img {
	width:125px;
	height:125px;
	margin:0 auto;
}