JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
    <h4>Section 1</h4>
    <div>
        <span class="item">
            <a href="#">
                <img src="http://placehold.it/200x100"/>
                <p>Item Name Item Name Item Name Item Name Item Name</p>
            </a>
        </span>
        <span class="item">
            <a href="#">
                <img src="http://placehold.it/140x100"/>
                <p>Item Name</p>
            </a>
        </span>
        <span class="item">
            <a href="#">
                <img src="http://placehold.it/140x100"/>
                <p>Item Name</p>
            </a>
        </span>
        <span class="item">
            <a href="#">
                <img src="http://placehold.it/140x100"/>
                <p>Item Name</p>
            </a>
        </span>
        <span class="item">
            <a href="#">
                <img src="http://placehold.it/140x100"/>
                <p>Item Name</p>
            </a>
        </span>
    </div>
</div>

CSS

div.items{
    margin: 1rem 0rem;
}

div.items div{
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

div.items img{
    margin: 0.5rem;
}

div.items h4{
    margin-left: 0.5rem;
}

span.item{
    display: inline-block;
    vertical-align: top;
}

span.item a{
    text-decoration: none;
    color: grey;
    text-align: center;
    display: table-caption;
    white-space: normal;
}

hr{
    border: 0; 
    height: 0; 
    border-top: 2px solid #dddddd;
}