JSFiddle - React, Tailwind, and code Playground

HTML

<div class="home-boxes">
    <article class="news">
        <img class="new-img" src="man.png"> <span class="main-title">NEWS</span>

    </article>
    <article class="news">
        <img class="new-img" src="kids2.png"> <span class="main-title">KIDS</span>

    </article>
    <article class="news">
        <img class="new-img" src="babys.png"> <span class="main-title">BABIES</span>

    </article>
    <article class="news">
        <img class="new-img" src="noamt.png"> <span class="main-title">BABIES</span>

    </article>
</div>

CSS

div.home-boxes {
        white-space:nowrap;
        position:relative;
        width:1584px;
        overflow:auto;
        width: 100%;
        font-size: 40px;
        line-height: 40px;
        color: #fff;
        font-family:Impact;
        overflow-x: scroll;
        overflow:auto;
    }
    .news {
        position: relative;
        left: 0px;
        top: 0px;
        height:396px;
        width:396px;
        display: inline-block;