JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="container">
  <div class="item">
    <img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
  </div>
  <div class="item"><img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" /></div>
  <div class="item"><img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" /></div>
  <div class="item"><img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" /></div>
  <div class="item"><img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" /></div>
  <div class="item"><img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" /></div>
  <div class="item"><img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" /></div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.container {
  display:flex;
  height:100vh;
  flex-direction: column;
  flex-wrap: wrap;
}

.container>* {
  flex: 1 1 auto;
  margin: 2px;
  width:50%;
}

.item img {
  width: 100%;
  height:25vh;
  object-fit: cover;
  object-position: center;
  overflow:hidden;
}