JSFiddle - React, Tailwind, and code Playground

by Hemant Sharma

HTML

<div class="row"> 
  <img src="/w3images/wedding.jpg" >
  <img src="/w3images/rocks.jpg" >
  <img src="/w3images/falls2.jpg" >
  <img src="/w3images/paris.jpg" >
  <img src="/w3images/nature.jpg" >
  <img src="/w3images/mist.jpg" >
  <img src="/w3images/paris.jpg" >
  <img src="/w3images/underwater.jpg" >
  <img src="/w3images/ocean.jpg" >
  <img src="/w3images/wedding.jpg" >
  <img src="/w3images/mountainskies.jpg" >
  <img src="/w3images/rocks.jpg" >
  <img src="/w3images/underwater.jpg" >
  <img src="/w3images/wedding.jpg" >
  <img src="/w3images/rocks.jpg" >
  <img src="/w3images/falls2.jpg" >
  <img src="/w3images/paris.jpg" >
  <img src="/w3images/nature.jpg" >
  <img src="/w3images/mist.jpg" >
  <img src="/w3images/paris.jpg" >
  <img src="/w3images/underwater.jpg" >
  <img src="/w3images/ocean.jpg" >
  <img src="/w3images/wedding.jpg" >
  <img src="/w3images/mountainskies.jpg" >
  <img src="/w3images/rocks.jpg" >
  <img src="/w3images/underwater.jpg" >
</div>

CSS

* {
  box-sizing: border-box;
}

.row {
	display: flex;
  flex-wrap: wrap;
}
.row img {
	flex: 1;
  width: 33%;
  height: 200px;
  padding: 5px;
  object-fit: cover;
}