JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img-pad">
  <img src="https://www.gravatar.com/avatar/dd7c1fa96edde079ae4b987eec68f6d1?s=420&d=identicon&r=PG&f=1" class="img-border-rad">
  <div class="progressbar">
    <div class="progressbar__done" style="width:40%;"></div>
  </div>
</div>

CSS

.img-pad {
  display: inline-block;
  position: relative;
}

.img-border-rad {
  border-radius: 10px;
}

.progressbar {
  height: 4px;
  position: absolute;
  bottom: 4px;
  width: 100%;
  background-color: #b1b1b1;
}

.progressbar__done {
  height: 4px;
  position: absolute;
  background-color: #fa1212;
}