JSFiddle - React, Tailwind, and code Playground

HTML

<article>
   <div class="thumbnail-img">
      <img src="http://pti.mizagorn.com/wp-content/uploads/2017/07/2-1080x675.png">
   </div>
   <div class="avatar">
      <img src="http://2.gravatar.com/avatar/586dffc3308324e0c294a0abff58eb86?s=96&d=mm&r=g">
   </div>
   <div class="content">
      <p>This is some content!</p>
   </div>
</article>

CSS

.avatar {
	margin-left: auto;
	margin-right: auto;
	max-width: 25%;
	min-width: 70px;
	position: relative;
}
.avatar img {
	border-radius: 50%;
	background-color: rgba(255,255,255,.2);
	padding: 5px;
	margin-top: -60%;
	z-index: 10;
}