JSFiddle - React, Tailwind, and code Playground

by Sebastian Brosch

HTML

<div id="conversationarea" style="max-height:1024px;overflow:scroll;overflow-x: hidden;width:100%">
  <div class="humanphrase human bubble">Hi!</div>
  <div class="botphrase bot bubble" id="botphrase1">Hi it's great to see you!</div>
  <div class="humanphrase human bubble">How are you?</div>
  <div class="botphrase bot bubble" id="botphrase2">I'm very well. How are you doing?</div>
</div>

CSS

#conversationarea {
  display:flex;
  flex-direction:column;
}
.bubble{
  background-color: #F2F2F2;
  border-radius: 5px;
  box-shadow: 0 0 6px #B2B2B2;
  display: inline;
  padding: 10px 18px;
  position: relative;
  vertical-align: top;
}
.bubble::before {
  background-color: #F2F2F2;
  content: "\00a0";
  display: block;
  height: 16px;
  position: absolute;
  top: 11px;
  transform:rotate( 29deg ) skew( -35deg );
  -moz-transform:rotate( 29deg ) skew( -35deg );
  -ms-transform:rotate( 29deg ) skew( -35deg );
  -o-transform:rotate( 29deg ) skew( -35deg );
  -webkit-transform:rotate( 29deg ) skew( -35deg );
  width:  20px;
}
.human {
  align-self:flex-start;
  margin: 5px 45px 5px 20px;
}
.human::before {
  box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
  left: -9px;
}
.bot {
  align-self:flex-end;
  margin: 5px 20px 5px 45px;
}
.bot::before {
  box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
  right: -9px;
}