JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chat-feed">
  
  <div class="message message--in">
    <div class="message__content">
      Привет, как дела?
    </div>
  </div>

  <div class="message message--out">
    <div class="message__content message__content--out">
      Ой, всё просто отлично.
    </div>
  </div>
  
</div>

CSS

body {
  font-family: sans-serif;
  background-color: #000;
  margin: 0;
}

.chat-feed {
  display: grid;
  grid-row: 1fr auto;
  gap: 20px 0;
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.message {
  display: flex;
  align-items: flex-end;
}

.message:before {
  content: '';
  position: relative;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='20' viewBox='0 0 14 20' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 20C0.832546 19.8331 0.74517 18.9202 1.36886 18.6297L2 18.3358C9.06362 15.2496 14 8.20128 14 0V20H1.5V20Z'/%3E%3C/svg%3E%0A");
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
}

.message__content {
  position: relative;
  z-index: 2;
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 4px 4px 4px 0;
}

.message--out {
  margin-left: auto;
}


.message--out {
  margin-left: auto;
  flex-flow: row-reverse;
}


.message--out:before {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='20' viewBox='0 0 14 20' fill='%238b00ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 20C0.832546 19.8331 0.74517 18.9202 1.36886 18.6297L2 18.3358C9.06362 15.2496 14 8.20128 14 0V20H1.5V20Z'/%3E%3C/svg%3E%0A");
  transform: scaleX(-1);
}

.message__content--out {
  background-color: #8b00ff;
  color: #fff;
    border-radius: 4px 4px 0 4px;
}