JSFiddle - React, Tailwind, and code Playground

by Chandan D Nadig

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 <div class="col-xs-12">
        <div class="canvas-scrollable">
            <ul class="list-inline clearfix">
                <li class="col-xs-12 col-sm-6 col-md-4">
                    <table class="item-inner">
                        <tr>
                            <td class="item-thumb">
                                <img class="img-responsive" src="images/#">
                            </td>
                            <td class="item-thumb">
                                <img class="img-responsive" src="images/#">
                            </td>
                        </tr>
                        <tr>
                            <td class="item-thumb">
                                <img class="img-responsive" src="images/#">
                            </td>
                            <td class="item-thumb">
                                <img class="img-responsive" src="images/#">
                            </td>
                        </tr>
                    </table>
                </li>
               <li class="col-xs-12 col-sm-6 col-md-4">
                    <table class="item-inner">
                        <tr>
                            <td class="item-thumb">
                                <img class="img-responsive" src="images/#">
                            </td>
                            <td class="item-thumb">
                                <img class="img-responsive" src="images/#">
                            </td>
                        </tr>
                        <tr>
                            <td class="item-thumb">
                                <img class="img-responsive" src="images/#">
                            </td>
                            <td class="item-thumb">
                                <img class="img-responsive" src="images/#">
                            </td>
                       ...

CSS

.canvas-scrollable{
    width: 100%;
    height: auto;
    overflow-y: hidden;
    overflow-x: auto;
}

.canvas-scrollable .item-inner{
    height: 300px;
    margin: 10px;
    /*white-space:nowrap;*/
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}

.item-thumb{
  width: 50%;
  height:50%;
  padding: 4px;
  border: 1px solid green;
}

.item-thumb img{
    height: 100%;
    object-fit: cover;
}