JSFiddle - React, Tailwind, and code Playground

by cent cent

HTML

<!--References:
http://css-tricks.com/snippets/css/css-triangle/

http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work?rq=1

http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin?rq=1
-->
<div class="arrow arrow_box arrow_font arrow_head">Buongiorno!</div>
<div class="arrow">
    <div class="arrow_tail_border">
        <div class="arrow_tail_bkgnd"></div>
    </div>
    <div class="arrow_box arrow_font arrow_tail_body">Arrivederci!</div>
</div>

CSS

/* superb tooltip! */

/*
       * define general parameters here...
       * ---------------------------------
       */
 .arrow {
    position: relative;
    float: left;
}
.arrow_box {
    width: 100px;
    height: 50px;
    padding: 4px;
    border: 4px solid #c2e1f5;
}
.arrow_font {
    font-size:1.2em;
    line-height: 1.2em;
}
/*
       * arrow head parameters...
       * ------------------------
       */
 .arrow_head {
    background: #88b7d5;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 0 5px #888888;
    -webkit-box-shadow: 0 0 5px #888888;
    box-shadow: 0 0 5px #888888;
}
.arrow_head:after, .arrow_head:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
/* arrow head background */
 .arrow_head:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #88b7d5;
    border-width: 27px;
    margin-top: -27px;
    /*reverse 'border-width'*/
}
/* arrow head border */
 .arrow_head:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #c2e1f5;
    border-width: 33px;
    /*from '.arrow_head:after': 'border-width'+6px*/
    margin-top: -33px;
    /*reverse 'border-width'*/
}
/* continue the superb! */

/*
       * arrow tail parameters...
       * ------------------------
       */
 .arrow_tail_body {
    border-color: transparent;
    /*95px follows '.arrow_head:before': 'border-width'*/
    margin-left: 33px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
/* arrow tail border */
 .arrow_tail_border {
    width: 0;
    height: 0;
    position: relative;
    float: left;
    /*33px follows '.arrow_head': (2*'padding'+'height'+2*'border')/2*/
    border-top: 33px solid #c2e1f5;
    border-bottom: 33px solid #c2e1f5;
    /*33px follows '.arrow_head:before': 'border-width'*/
    border-left: 33px solid...