JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<button class="left">animate-left</button>
<button class="left">animate-right</button>
<div id="bubbles">
  <div class="bubble-wrap-l">
    <div class="bubble left">
       Everybody is identical in their secret unspoken belief that way deep down they are different from everyone else.   
    </div>
  </div>
    <div class="bubble-wrap-r">
    <div class="bubble right">
       Everybody is identical in their secret unspoken belief that way deep down they are different from everyone else.   
    </div>
  </div>
</div>

CSS

/* modified from 
   https://www.ilikepixels.co.uk/drop/bubbler/ 
*/
a {
  color: #fff;
}

body {
  background: #3a3a3a;
  font-family: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
}

@-webkit-keyframes scaleIn {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes scaleIn {
  from {
    -moz-transform: scale(0);
  }
  to {
    -moz-transform: scale(1);
  }
}
@keyframes scaleIn {
  from {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.bubble-wrap-l.fade-in {
  -webkit-animation: scaleIn 0.4s ease-in-out;
  -moz-animation: scaleIn 0.4s ease-in-out;
  animation: scaleIn 0.4s ease-in-out;
  -webkit-transform-origin: 0 50% 0;
  -moz-transform-origin: 0 50% 0;
  -ms-transform-origin: 0 50% 0;
  -o-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
}

.bubble-wrap-l {
  width: 300px;
  margin: 20px auto;
}

.bubble-wrap-r {
  width: 300px;
  margin: 20px auto;
}

.bubble {
  position: relative;
  padding: 20px;
  background: #FFFFFF;
  border-radius: 4px;
  border: #7F7F7F solid 1px;
  font-size: 1em;
  line-height: 1.25em;
}

.bubble.left:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 16px 16px 16px 0;
  border-color: transparent #FFFFFF;
  display: block;
  width: 0;
  z-index: 1;
  left: -15px;
  top: 50%;
  margin-top: -16px;
}

.bubble.left:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 16px 16px 16px 0;
  border-color: transparent #7F7F7F;
  display: block;
  width: 0;
  z-index: 0;
  left: -16px;
  top: 50%;
  margin-top: -16px;
}

.bubble.right:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 16px 0 16px 16px;
 ...

JavaScript

$('button.left').click(function(){
    var bubbles = $('.bubble-wrap-l').toggleClass('fade-in');
    event.stopPropagation();
});

$('button.right').click(function(){
    var bubbles = $('.bubble-wrap-r').toggleClass('fade-in');
    event.stopPropagation();
});