JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" accept="image/*" onchange="loadFile(event)">
<br/>
<b>Mobile</b>

<br/>
<img id="output1" class="box1" />
<br/>
<b>Tablet</b>

<br/>
<img id="output2" class="box2" />
<br/>
<b>Desktop</b>

<br/>
<img id="output3" class="box3" />
<br/>
<b>Large Desktop</b>

<br/>
<img id="output4" class="box4" />
<br/>

CSS

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box1 {
      width: 480px;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box2 {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box3 {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box4 {
      width: 25%;
      padding-bottom: 25%;
   }
}

JavaScript

var loadFile = function (event) {
      var reader = new FileReader();
      reader.onload = function () {
          var output = document.getElementById('output1');
          output.src = reader.result;
          output = document.getElementById('output2');
          output.src = reader.result;
          output = document.getElementById('output3');
          output.src = reader.result;
          output = document.getElementById('output4');
          output.src = reader.result;
      };
      reader.readAsDataURL(event.target.files[0]);
  };