JSFiddle - React, Tailwind, and code Playground

by tuga

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

/* Smartphone view: 1 tile */
   .box1 {
       display: block;
       width : 480px;
   }
   /* Tablet view: 2 tiles */
   .box2 {
        display: block;
        width  : 650px;
   }
   /* Small desktop / ipad view: 3 tiles */
    .box3 {
     display: block;
     width  : 1050px;
   }
   /* Medium desktop: 4 tiles */
   .box4 {
       display: block;
        width: 1290px;
   }

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]);
  };