JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="DocumentList">
    <ul class="list-inline">
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
        <li class="DocumentItem">
            <span>Test Data1</span>
        </li>
    </ul>
</div>

 </body>

CSS

.DocumentList
        {
            overflow-x:scroll;
            overflow-y:hidden;
            height:200px;
            width:400px;
            padding: 0 15px;
        }

        .DocumentItem
        {
            border:1px solid black;
            padding:0;
            height:200px;
            display: inline-block;
        }

        .list-inline{
          white-space:nowrap;
        }