JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li>
            <div class="deyDiv news">
                <img class="iuyE" src="https://images.pexels.com/photos/2752177/pexels-photo-2752177.jpeg?cs=srgb&dl=pexels-anton-imbro-2752177.jpg&fm=jpg" />
                <h6 class="text">The title of the nese</h6>
            </div>
        </li>        
        <li>
            <div class="deyDiv news">
                <img class="iuyE" src="https://images.pexels.com/photos/2752177/pexels-photo-2752177.jpeg?cs=srgb&dl=pexels-anton-imbro-2752177.jpg&fm=jpg" />
                <h6 class="text">The title of the nese</h6>
            </div>
        </li>       
        <li>
            <div class="deyDiv news">
                <img class="iuyE" src="https://images.pexels.com/photos/2752177/pexels-photo-2752177.jpeg?cs=srgb&dl=pexels-anton-imbro-2752177.jpg&fm=jpg" />
                <h6 class="text">The title of the nese</h6>
            </div>
        </li>
    </ul>

CSS

ul {
    width: 100% !important;
    list-style-type: none !important;
    margin: auto !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}
li{
    display: inline !important;
}
.deyDiv{
    position: relative;
    margin-top:5px;
    margin-bottom:5px;
    padding-right:2px; 
}
.text{
    position: absolute;
    bottom: 8px;
    left: 16px;
    color: white;
}
.iuyE{ 
    border-radius:10px;
    max-width: 100%;
}
.news{
  width: 60%;
    height:45%;
    display: inline-block;
}