JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
     <div class="scroll">
         <div class="item">
             <p class="center"><div class="img" style="background-image:url(images/sample1.jpg);"></div></p>
             <p class="title">Product Name</p>
             <p class="left"><strong>Current Bid:</strong> &pound;10.00</p>
             <p class="right"><a href="#">View Item</a></p>
         </div>
     <!-- .item  repeats a few times after a DB query, hence exact width is unknown -->
          <div class="item">
             <p class="center"><div class="img" style="background-image:url(images/sample1.jpg);"></div></p>
             <p class="title">Product Name</p>
             <p class="left"><strong>Current Bid:</strong> &pound;10.00</p>
             <p class="right"><a href="#">View Item</a></p>
         </div>
     <!-- .item  repeats a few times after a DB query, hence exact width is unknown -->
          <div class="item">
             <p class="center"><div class="img" style="background-image:url(images/sample1.jpg);"></div></p>
             <p class="title">Product Name</p>
             <p class="left"><strong>Current Bid:</strong> &pound;10.00</p>
             <p class="right"><a href="#">View Item</a></p>
         </div>
     <!-- .item  repeats a few times after a DB query, hence exact width is unknown --> <div class="item">
             <p class="center"><div class="img" style="background-image:url(images/sample1.jpg);"></div></p>
             <p class="title">Product Name</p>
             <p class="left"><strong>Current Bid:</strong> &pound;10.00</p>
             <p class="right"><a href="#">View Item</a></p>
         </div>
     <!-- .item  repeats a few times after a DB query, hence exact width is unknown -->
          <div class="item">
             <p class="center"><div class="img" style="background-image:url(images/sample1.jpg);"></div></p>
             <p class="title">Product Name</p>
             <p class="left"><strong>Current Bid:</strong> &pound;10.00</p>
 ...

CSS

.items{
    width:100%;
    overflow-x:scroll;
    overflow-y:hidden;
    background:rgba(255,255,255,.8); 
    height:350px;
    position:relative;
    
}
.items .scroll{
    height:100%;
    padding:0px;
    width:auto;
    position:absolute;
    white-space:nowrap;
}
.items .item{
    height:100%;
    margin-left:25px;
    margin-right:25px;
    width:150px;   
    position:relative;
    display:inline-block;
}
.items .item a{
    padding:5px;
    background:#0e76bc;
    color:#FFF;
    text-decoration:none;
}
.items .item .img:hover{
    box-shadow:0px 0px 3px rgba(0,0,0,0.5);
    -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
}
.items .item .img{
    height:175px;
    width:100%;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
}