JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="avatar">
  <div class="avatar__photo">
    <img src="http://dummyimage.com/200x200" alt="Jane Doe" class="avatar__img">
  </div>
  <div class="avatar__info">
    <h2 class="avatar__name">Jane Doe</h2>
    <div class="avatar__title">Executive Vice President of Operations</div>
  </div>
</div>

SCSS

.avatar {
  height: 5rem;
  display: flex;
  background-color: #0f04;
  
  &__photo {
    border: 3px solid navy;
  }
  
  &__img {
    max-height: 100%;
    object-fit: contain;
  }
}