JSFiddle - React, Tailwind, and code Playground

HTML

<user-avatar>
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="..." />
</user-avatar>

CSS

body {
  display: flex;
  justify-content: center;
  align-items:center;
  min-height: 100vh;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  display: block;
  width: 100%;
}

JavaScript

class UserAvatar extends HTMLElement {
  constructor() {
    super();
  }
  
  connectedCallback() {
    const image = this.querySelector('img');
    const div = document.createElement('div');
    div.className = "avatar";
    this.innerHTML = ""; // not sure if this is needed
   	div.appendChild(image);
    this.appendChild(div);
    
    // OR you can just do this
    /* this.innerHTML = `<div class="avatar">${this.innerHTML} </div>`*/
  }
}


customElements.define("user-avatar", UserAvatar);