JSFiddle - React, Tailwind, and code Playground

by Milan Karagunović

HTML

<div id="gallery">
  <img src="/" alt="Image 1"/>
  <img src="/" alt="Image 2"/>
  <img src="/" alt="Image 3"/>
  <img src="/" alt="Image 4"/>
  <img src="/" alt="Image 5"/>
  <img src="/" alt="Image 6"/>
</div>

CSS

body {
    overflow-x: hidden;
}
#gallery {
    width: 960px;
    margin: 0 auto;
    padding-top: 10px;
    text-align: center;
    border: 1px solid #555;
}
img {
    background: #eee;
    margin: 5px;
    height: 280px;
    width: 300px;
}

@media all and (max-width:960px) {
  #gallery {
    width: 900px;
   
   }        
}
@media all and (max-width:720px) {
   #gallery {
     width: 660px;
   
   }
}
@media all and (max-width:480px) {
  #gallery {
    width: 420px;
   
  }
}