JSFiddle - React, Tailwind, and code Playground

by justicechan

HTML

<div class="container">
  <div class="header">header</div>
  <div class="body-content">
<div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      </div>
      <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
</div>
<div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      </div>
      <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
</div>
<div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      </div>
      <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
</div>
    <div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      </div>
      <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
</div>



  </div>
</div>

CSS

body {}

.container {
  background-color: yellow;
}

.header {
  background-color: yellow;
  height: 14vh;
}

.body-content {
  text-align: center;
  background-color: green;
}

.image-wrapper{
  width:calc(25% - 5px);
  display:inline-block;

}

.image-wrapper img {
  max-width:200px;
  max-height:200px;
}

@media(max-width:600px){
  .image-wrapper {
    width:calc(50% - 4px);
  }
}