JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rem">
  <img src="https://i.imgur.com/NReN4xE.png" />5rem (rendered 50px)
  
  <div class="second-rem">
    <img src="https://i.imgur.com/NReN4xE.png" />5rem (rendered 50px)
  </div>
</div>

<div class="em">
  <img src="https://i.imgur.com/NReN4xE.png" />5em (rendered 75px)
  
  <div class="second-em">
    <img src="https://i.imgur.com/NReN4xE.png" />5em (rendered 50px)
  </div>
</div>

<div class="px">
  <img src="https://i.imgur.com/NReN4xE.png" /> 100px (100px rendered)
</div>

SCSS

html {
  font-size: 10px;
}

// REM
.rem {
  font-size: 15px;

  img {
    width: 5rem;
  }

  .second-rem {
    font-size: 10px;

    img {
      width: 5rem;
    }
  }
}

// EM
.em {
  font-size: 15px;

  img {
    width: 5em;
  }
 
  .second-em {
    font-size: 10px;

    img {
      width: 5em;
    }
  }
}


// PX
.px {
  img {
    width: 100px;
  }
}