JSFiddle - React, Tailwind, and code Playground

HTML

<div class="entries_container">

<ul>

<li class="tile" >
<img class="wallpaperThumb" src="http://javinladish.com/example/red.jpg" width="1476" height="1244">
</li>

<li class="tile" >
<img class="wallpaperThumb" src="http://javinladish.com/example/orange.jpg" width="1440" height="1666">
</li>

<li class="tile" >
<img class="wallpaperThumb" src="http://javinladish.com/example/yellow.jpg" width="680" height="833">
</li>

<li class="tile" >
<img class="wallpaperThumb" src="http://javinladish.com/example/green.jpg" width="2000" height="2000">
</li>

<li class="tile" >
<img class="wallpaperThumb" src="http://javinladish.com/example/blue.jpg" width="1731" height="1500">
</li>

<li class="tile" >
<img class="wallpaperThumb" src="http://javinladish.com/example/indigo.jpg" width="900" height="1000">
</li>

<li class="tile" >
<img class="wallpaperThumb" src="http://javinladish.com/example/violet.jpg" width="1420" height="1113">
</li>

</ul>

CSS

li {
  list-style-type: none;
}

.entries_container{
  position: relative;
  max-width: 1100px;
  top: 0;
  left: 0;
  column-count: 3;
  column-gap: 24px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  padding-left: 24px;
  padding-right: 24px;
}
  
 ul{
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0 auto;
 }
    
 li{
      position: relative;     
}

.tile {
	background-color: #ffffff;
    margin-bottom: 25px;
}

.wallpaperThumb {
      width: 100%;
      height: 100%;
       transition: .2s ease;
       transform: scale(1);
       opacity: 1;
    }

@media only screen 
and (max-width : 1060px) {
.item{
	width: 48%;
}
}

@media only screen 
and (max-width : 840px) {
.entries_container {
	column-count: 2;	
	}
}

@media only screen 
and (max-width : 660px) {
.item{
	width: 100%;
}
}

@media only screen 
and (max-width : 500px) {
	.entries_container {
	column-count: 1;	
	}
}