JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Chat is-active">
  <div class="Chat-message">Hi 😉</div>
  <div class="Chat-message Chat-message--me">Ciao!<br>How are you? 🙂</div>
  <div class="Chat-message">Fine thx! Up for a ☕?</div>
</div>

SCSS

.Chat {
  font: 14px/1.4 sans-serif;
  position: relative;
  overflow-y: scroll;
  width: 300px;
  height: 360px;

  &-message {                 /* refers to .Chat-message */
    padding: 16px;
    background: #eee;
    

    &--me {                   /* refers to .Chat-message--me */
      background: #eef;       /* Style my messages differently from other messages */
      text-align: right;
    }
  }

  &.is-active {                /* refers to .Chat.is-active (JS) */
    outline: 3px solid lightblue;
  }
}