JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<figure>
    <img src="https://image.shutterstock.com/image-vector/male-avatar-profile-picture-vector-260nw-221431012.jpg" class="main-profile-img" />
    <img class="editIcon"...

CSS

figure{
  width: 140px;
  height: 140px;
  position: relative;
}
    .main-profile-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        border-style: solid;
        border-color: #FFFFFF;
        box-shadow: 0 0 8px 3px #B8B8B8;
    }
    .editIcon{
      position: absolute;
      right: 0px;
      top: 10px;
      width: 20px;
      height: 20px;
      background: #fff;
      border-radius: 100%;
      box-shadow: 0 0 8px 3px #B8B8B8
    }