JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
<div id="wrap1">
   <div class="result">
    <div class="title">1</div>
    <div class="postcontent"><p>Test</p></div>
   </div>

   <div class="result">
    <div class="title">2</div>
    <div class="postcontent"><p>Test</p></div>
   </div>
       <div class="result">
    <div class="title">3</div>
    <div class="postcontent"><p>Test</p></div>
   </div>

       <div class="result">
    <div class="title">4</div>
    <div class="postcontent"><p>Test</p></div>
   </div>

      <div class="result">
    <div class="title">5</div>
    <div class="postcontent"><p>Test</p></div>
   </div>

   <div class="result">
    <div class="title">6</div>
    <div class="postcontent"><p>Test</p></div>
   </div>
       <div class="result">
    <div class="title">7</div>
    <div class="postcontent"><p>Test</p></div>
   </div>

      <div class="result">
    <div class="title">8</div>
    <div class="postcontent"><p>Test</p></div>
   </div>
          <div class="result">
    <div class="title">9</div>
    <div class="postcontent"><p>Test</p></div>
   </div>

   <div class="result">
    <div class="title">10</div>
    <div class="postcontent"><p>Test</p></div>
   </div>
       <div class="result">
    <div class="title">11</div>
    <div class="postcontent"><p>Test</p></div>
   </div>

   <div class="result">
    <div class="title">Lorem Ipsum Dolor</div>
    <div class="postcontent"><p>12</p></div>
   </div>
       <div class="result">
    <div class="title">13</div>
    <div class="postcontent"><p>Test</p></div>
   </div>
          <div class="result">
    <div class="title">14</div>
    <div class="postcontent"><p>Test</p></div>
   </div>

   <div class="result">
    <div class="title">15</div>
    <div class="postcontent"><p>Test</p></div>
   </div>
       <div class="result">
    <div class="title">16</div>
    <div class="postcontent"><p>Test</p></div>
   </div>

    <div class="result">
    <div class="title">last</div>
    <div...

CSS

html, body {
    margin: 0;
    height: 100%;
}

#wrap
{
width:100%;
height:100%;
background-color: rgba(0,0,0,0.5);
overflow:scroll;
overflow-y:hidden;
}

#wrap1
{
/*width:2500px;*/
height:100%;
text-align: center;
}


.result
{
width: 300px;
vertical-align: middle;
/*float:left;*/
background: rgba(120,30,20,0.5);
padding: 10px;
margin: 30px 0px 30px 30px; 
}



#wrap1 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
 }