JSFiddle - React, Tailwind, and code Playground

HTML

<div class="template-row">
      <div class="template-row__body">
        <div class="card-wrap p-10">
          <div class="temp-wrap">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
          </div>
        </div>
        <div class="card-wrap p-10">
          <div class="temp-wrap">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
          </div>
        </div>
        <div class="card-wrap p-10">
          <div class="temp-wrap">
            <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
          </div>
        </div>

        
      </div>
    </div>

CSS

img {
      height: auto;
      max-width: 100%;
      width: 100%;
      vertical-align: middle;
      border: 0;
    }

    .template-row {
      height: calc(100vh - 110px);
      overflow-x: hidden;
      overflow-y: scroll;
    }

    .template-row__body {
      list-style: none;
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
      -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
      page-break-after: avoid;
    }

    .template-row li {
      display: block;
      margin: 0 0 1em;
      width: 100%;
      
    }
    
.template-row .temp-wrap{
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    background-color: #fff;
    padding:5px;
    box-sizing: border-box;
}