JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="image"></div>
  <div class="comment">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, beatae quae? Magni amet vitae praesentium debitis, hic, fuga animi assumenda magnam placeat. Iste mollitia earum, atque nihil necessitatibus veniam animi.</p>
  </div>
</div>

SCSS

.container{
  width: 100%;
}
.image{
  width: 50%;
  display: block;
  height: 100px;
  margin: 0 auto;
  background-color: #000;
}
.comment{
  width: 40%;
  margin: 20px auto 0;
  background-color: #eee;
  position: relative;
  &:before{
    @include triangle("up", 20px, #eee); 
  }
}

@mixin triangle($direction, $size: 6px, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){
    border-bottom: $size solid $color;
    border-left: 1/2$size solid transparent;
    border-right: 1/2$size solid transparent;
  }
}