JSFiddle - React, Tailwind, and code Playground

HTML

<div id="File-Body">
  <label id="File-Lable" for="File-For">
    <div id="Filebutton">Edit</div>
  </label>
  <input id="File-For" type="file">
</div>
I can also show ya a project I did with this
<br><br><br><br><br><br><br><br><br><br>
<div id="SignUp-Confirm-List-Image-DL">
  <div id="SignUp-Confirm-List-Image-DL-Header">Click here V # make sure it is a image</div>
  <label id="SignUp-Confirm-List-Image-DL-Img" for="SignUp-Confirm-List-Image-DL-Browse">
    <img id="SignUp-Confirm-List-Image-DL-Image" src="img-BG/Browse-FrontImage+.png" />
  </label>
  <input id="SignUp-Confirm-List-Image-DL-Browse" width="250px" height="300px" name="Confirm_DL_Image" type="file">

  <script style="color: lightgray;">
    window.addEventListener('load', function() {
      document.querySelector('input[id="SignUp-Confirm-List-Image-DL-Browse"]').addEventListener('change', 				function() {
        if (this.files && this.files[0]) {
          var img = document.querySelector('#SignUp-Confirm-List-Image-DL-Image'); // $('img')[0]
          img.src = URL.createObjectURL(this.files[0]); // set src to blob url
          img.onload = imageIsLoaded;
        }
      });
    });

  </script>
</div>

CSS

#File-Body>#File-For {
  display: none;
}

#Filebutton {
  width: 50px;
  height: 20px;
  border: 1px solid;
  border-radius: 2px;
  text-align: center;
}

#File-Body {
  width: 300px;
  height: 30px;
}

@charset "utf-8";
/* CSS Document */

body {
  width: 100%;
  height: 100%;
  display: block;
  font-size: 13px;
  margin: 0px auto;
  position: relative;
  font-family: Arial, "Cambria", "Hoefler Text",
    "Liberation Serif", Times, serif;
}

#SignUp-Sheet {
  width: 100%;
  height: auto;
  float: left;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 12px 0px;
  background-color: lightgray;
  box-shadow: inset 0px 0px 12px darkgray;
}

#SignUp {
  width: 800px;
  height: auto;
  display: block;
  font-size: 14px;
  margin: 0px auto !important;
  padding: 24px 0px 40px 0px;
}

#SignUp-Header-My {
  color: black;
  float: left;
  font-weight: 600;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#SignUp-Header-Simple {
  color: red;
  float: left;
  font-weight: 600;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 4px;
}

#SignUp-Header-Online {
  color: blue;
  float: left;
  font-weight: 600;
  margin: 0px 0px 0px 0px;
  padding: 0px 4px 0px 0px;
}

#SignUp-Header-SignUp {
  color: gray;
  float: left;
  font-weight: 600;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px...