JSFiddle - React, Tailwind, and code Playground

HTML

<div class="profile-img">
  <img class="profile-thumb" src="https://tinyurl.com/kdc5vlp" id="bannerImg" />
  <div class="upload">
    <div class="upload-button"><img src="https://tinyurl.com/mrphx9r" alt="" /></div>
    <input class="file-upload" type="file" accept="image/*" />
  </div>
</div>

CSS

.profile-img {
  margin: 0 auto;
  position: relative;
  width: 130px;
}

.profile-thumb {
  background: #fff none repeat scroll 0 0;
  border-radius: 50%;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.1);
  height: 130px;
  margin: 0 0 0;
  padding: 3px;
  width: 130px;
}

.upload {
  bottom: -10px;
  position: absolute;
  right: 0;
}

.upload img {
  cursor: pointer;
}

.file-upload {
  display: none !important;
}

.upload-button {
  width:32px;
  height:32px;
  background: #FFF;
  border-radius:50%;
  border:2px solid #CCC;
}

.upload-button img {
  width: 22px;
  height: 22px;
  padding:5px 0 0 5px;
}

JavaScript

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#bannerImg').attr('src', reader.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$(".file-upload").change(function() {
  readURL(this);
});

$(".upload-button").on('click', function() {
  $(".file-upload").click();
});