JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/@bantam-io/js@latest/index.js"></script>
<script
  src="http://code.jquery.com/jquery-2.1.1.min.js"
  integrity="sha256-h0cGsrExGgcZtSZ/fRz4AwV+Nn6Urh/3v3jFRQ0w9dQ="
  crossorigin="anonymous"
></script>
<script src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" />
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
/>
<div>
  <!-- CHALLENGES -->
  <div style="margin-top: 10vh; line-height: 1.6em">
    <h1 style="text-align: center;">
      Image Upload and Modification - Bantam Style
    </h1>
    <div
      style="margin-left: 20%;
    font-size: 1.2em; margin-bottom:1em;"
    >
      <ul>
        1. Upload an image
        <br />2. Get the metadata
        <br />3. Create modificaitons
        <div style='margin-left: 1em;'>
            - 500px</br >
            - Thumbmail</br >
            - Grayscale</br >
  
        </div>
    </div>
  </div>
  <!-- UPLOAD -->
  <div style='padding: 5px;font-size: 1.2em;'>
    <span>Select an image:</span>
    <button onclick="uploadAndShowFile('image/jpeg, image/jpg, image/png')">
      Select Image
    </button>
     <br>
  </div>

  <!-- RESULTS -->
  <div id='results' hidden>
  <!-- FULL IMAGE -->
  <div style="border-top:black solid 1px;">
    <div class="left">
      <h2>Full Size Image:</h2>
      <!-- <div class="ImageWrapper" style="text-align: center;margin-top: 1em;"> -->
        <img id="full" />
      <!-- </div> -->
    </div>
  </div>
<!-- About Image -->
  <div style="border-top:black solid 1px;clear: both;">
      <div class="left">
        Dominate Color: <span id='colorCode'></span>
        <div class='dominantColor' style="width:50px;height:50px"></div>
        <div id="width"></div>
        <div id="height"></div>        
      </div>
    </div>

<!-- FULL IMAGE WITH BORDER -->
    <div style="border-top:black solid 1px;clear: both;">
        <div class="left">
                <h2>Full...

CSS

.FullScreenLoading {
  max-width: 1000px;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.FullScreenLoading i.fa-spinner {
  font-size: 50px;
  width: 50px;
  height: 50px;
  position: fixed;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}

.Title {
  font-size: 1em;
  width: 30%;
  display: inline-block;
  text-align: left;
}
.Subtitle {
  font-size: 1.2em;
}

.ImageWrapper {
  position: relative;
  max-width: 100%;
}

.ImageWrapper img {
  object-fit: cover;
  /* border: 5px solid red; */
}

.DominateColor {
  display: inline-block;
  border: 1px solid black;
  width: 2em;
  height: 2em;
  vertical-align: middle;
}

code {
  background-color: black;
  color: white;
}

.left {
  padding: 1em;
}

#results img {
  max-width: 100%;
}

JavaScript

window.addEventListener('load', function() {
  bantam.configure({
    // apiKey: 'APIKEY',
  });

  window.uploadAndShowFile = function uploadAndShowFile(type) {
    selectFile(type).then(
      res => {
        console.log('result url', res.url);
        console.log('result metadata', res.metadata);

        document.querySelector('#thumbnail').src = bantam.url(
          '@images/modification',
          {
            width: 100,
            url: res.url,
          },
          {
            cache: true,
          }
        );

        document.querySelector('#medium').src = bantam.url(
          '@images/modification',
          {
            width: 300,
            url: res.url,
          },
          {
            cache: true,
          }
        );

        document.querySelector('#greyscale').src = bantam.url(
          '@images/modification',
          {
            url: res.url,
            width: 300,
            filter: 'greyscale',
          },
          {
            cache: true,
          }
        );

        document.querySelector('#border').style['border'] = `10px solid #888`;
        document.querySelector('#full').hidden = false;
        document.querySelector('#results').hidden = false;
      },
      e => {
        console.error('error', e);
      }
    );
  };

  window.selectFile = function selectFile(type) {
    function fullScreenLoading() {
      const loader = document.createElement('div');

      loader.classList.add('FullScreenLoading');
      loader.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
      document.body.appendChild(loader);
      return {
        dismiss: () => {
          loader.remove();
        },
      };
    }
    console.log('selected file: ', type);
    return new Promise(function(resolve, reject) {
      selectLocalImage();

      function selectLocalImage() {
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        if (type) {
         ...