JSFiddle - React, Tailwind, and code Playground

by chrisjg

HTML

<p>
    <div class="speech-bubble-specific">This bubble is fixed size for both height and width, based on absolute px dimesions.<br/>
        Height is 100px.<br/>
        Width is 400px.<br/></div>
</p>
<p>
    <div class="speech-bubble-relative">This bubble size is relative to the width of the parent and the height of the content.<br/>
        Height is auto.<br/>
        Width is 70%.</div>
</p>
<p>
    <div class="speech-bubble-em">This bubble width is relative to the size of the font and the height of the content.<br/>
        Height is auto.<br/>
        Width is 35em.</div>
</p>

SCSS

@mixin speech-bubble($sb-margin-left, $sb-width, $sb-height, $sb-background)
{
  background: $sb-background;
  display: inline-block;
  position: relative;
  margin-left: $sb-margin-left;
  width: $sb-width;
  height: $sb-height;
  padding: 5px 10px;

  &:before
  {
    content: '';
    position: absolute;
    left: -$sb-margin-left;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border-top: ($sb-margin-left / 2) solid transparent;
    border-right: $sb-margin-left solid $sb-background;
    border-bottom: ($sb-margin-left / 2) solid transparent;
  }
}

.speech-bubble-specific
{
   @include speech-bubble(15px, 400px, 100px, #ddd);
}

.speech-bubble-relative
{
   @include speech-bubble(15px, 70%, auto, #ddd);
}

.speech-bubble-em
{
   @include speech-bubble(15px, 35em, auto, #ddd);
}