JSFiddle - React, Tailwind, and code Playground

by Luke Vincent

HTML

<div class="profile-image">

  <img class="with-initials" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" width="50">

  <span class="initials">AN</span>

</div>

CSS

.profile-image img {
  border-radius: 100px;
}

.profile-image img.with-initials {
    position: relative;
    left: -10px;
}

.profile-image .initials {
    position: relative;
    bottom: 2px;
    left: 6%;
    margin: 0 auto;
    float: left;
    z-index: 100;
}

.profile-image span.initials {
    color: #efefef;
    font-weight: 600;
    font-size: 150%;
    line-height: 50px;
    letter-spacing: 1px;
}