JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-box">
   <h3 class="box-header">Recent Files</h3>
   <ul class="horizontal-content">
       <li>
          <div class="filebox">
          </div>
       </li>
       <li>
          <div class="filebox">
          </div>
       </li><li>
          <div class="filebox">
          </div>
       </li><li>
          <div class="filebox">
          </div>
       </li>
   </ul>
</div>

CSS

.content-box {
   position:relative;
   width:800px;
   border:1px solid #dadada;
   margin-left:10px;
   padding:10px;
}

ul.horizontal-content {
    list-style:none outside none;
}

ul.horizontal-content > li {
float:left;
display:block;
padding:10px;
}

.filebox {
position:relative;
padding:15px;
float:left;
width:200px;
height:200px;
border:5px solid #dadada;
background-color:#ecf0f1;
overflow: auto;
}