JSFiddle - React, Tailwind, and code Playground

by mezis

HTML

<div class="chat">
    <p>Pure CSS speech bubbles, with shadows</p>
    <hr/>

    <div class="bubble left">
        <span class='tail'>&nbsp;</span>
        Hello there! Here's some more text for your bubble.
    </div>
    
    <div class="bubble right">
        <span class='tail'>&nbsp;</span>
        This it what they're saying.
    </div>
</div>

SCSS

$shadow_radius = 6px;
$nose_size = 12px;
$shadow = 0 1px $shadow_radius #B2B2B2;
$border =  1px solid #bbb

.chat {
    font-family:      sans-serif;
    font-size:        small;
    margin:           50px 20px;
    padding:          10px;
    border:           1px solid #aaa;
}

.bubble {
    background-color: #F2F2F2;
    border-radius:    5px;
    border:           $border;
    box-shadow:       $shadow;
    display:          block;
    padding:          10px 18px;
    margin:           1em ($shadow_radius + $nose_size);
    position:         relative;
    vertical-align:   top;
}

.tail {
    position: absolute;
    height:  ($shadow_radius + $nose_size);
    width:   ($shadow_radius + $nose_size);
    overflow: hidden;

    &:before {
        border:            $border;
        background-color:  #F2F2F2;
        box-shadow:        $shadow;
        content:           "\00a0";

        display:           block;
        position:          absolute;
        top:               0px;
        height:            $nose_size;
        width:             $nose_size;
    }
}


.bubble.left {
    text-align: left;

    .tail {
        top:      $nose_size;
        left:   -($shadow_radius + $nose_size);

        &:before {
            left:              $nose_size;
            -webkit-transform: skewX( -45deg );
            -moz-transform:    skewX( -45deg );
            -o-transform:      skewX( -45deg );
        }
    }
}


.bubble.right {
    text-align: right;
    
    .tail {
        top:      $nose_size;
        right:   -($shadow_radius + $nose_size);

        &:before {
            right:              $nose_size;
            -webkit-transform: skewX( 45deg );
            -moz-transform:    skewX( 45deg );
            -o-transform:      skewX( 45deg );
        }
    }
}