JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test test--2">
  <div class="img_overlay">
    <div class="img_overlay__container">
      <div class="wrapper">
        <img class="img_overlay__img" src="https://dummyimage.com/400x400/000/ffffff.jpg&text=Image">
        <img class="img_overlay__overlay" src="https://dummyimage.com/100x100/0000ff/ffffff.jpg&text=Overlay">
      </div>
    </div>
  </div>
</div>

CSS

.wrapper{
	max-height: 100%;
	max-width: 100%;  
}
.img_overlay {
	display: inline-flex;
	max-height: 100%;
}
.img_overlay__container {
	position: relative;
	background-color: rgb(255, 0, 0)
}
.img_overlay__img {
border-radius: 50%;
max-height: 100vh;
max-width: 100%;
}
.img_overlay__overlay {
	border-radius: 50%;
	width: 25%;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
.test {
	display: flex;
	align-items: center;
	justify-content: center;
  background-color: rgb(0, 255, 0);
  border: 3px solid rgb(0, 255, 0);
  height: 100vh;
}