JSFiddle - React, Tailwind, and code Playground

HTML

<img id="profile-pic" alt="Profile picture" />
<h2>
  Your profile picture
</h2>

<input type="file" id="my-file" />

CSS

#profile-pic {
  object-fit: cover;
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 20px;
}

JavaScript

document.getElementById("my-file").onchange = function() {
  if (this.files && this.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
    	// e.target.result is a base64-encoded url that contains the image data
      document.getElementById('profile-pic').setAttribute('src', e.target.result);
    };
    reader.readAsDataURL(this.files[0]);
  }
}