JSFiddle - React, Tailwind, and code Playground

by Mohan Ravi

HTML

<div class='e-avatar e-avatar-circle'>
<img src='http://www.material-ui.com/images/uxceo-128.jpg'/>
</div>


<style>
.e-avatar {
    width: 4rem;
    height: 4rem;
    display: inline-block;
    line-height: 1;
    color: white;
    background: white;
		overflow: hidden;
}
.e-avatar-circle {
    border-radius: 50%;
}
.e-avatar img {
		width: 100%;
    height: 100%;
		text-align: center;
    object-fit: cover;
}
</style>