JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div class="speach"><div id="speach-baloon" class="baloon">Hello World!</div></div>
<form id="form"><textarea id="text" name="text"  cols="30" rows="3"></textarea></form>

CSS

body{
    padding-top:20px;
}

.speach{
    position: relative;
    overflow:hidden;
    display:-webkit-box;
    display:-moz-box;
    display:box;
    -webkit-box-align: end;
    -moz-box-align: end;
    box-align: end;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
}
.baloon {
    position: relative;
    background-color:#fff;
    border:solid 3px #ccc;
    margin: 0 0 10px 0;
    padding:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    max-width:10em;
}
.baloon::before{
    content: ' ';
    display:block;
    position: absolute;
    width: 0;
    height:0;
    left: 50%;
    margin-left:-10px;
    bottom:-20px;
    border:10px solid;
    border-color:#ccc transparent  transparent transparent;
    -webkit-transform:scale(0.5, 1);
    -moz-transform:scale(0.5, 1);
    transform:scale(0.5, 1);
}
.baloon::after {
    content: ' ';
    position: absolute;
    display:block;
    position: absolute;
    width:0;
    height:0;
    left: 50%;
    margin-left:-4px;
    bottom:-8px;
    border:4px solid;
    border-color: #fff transparent transparent transparent;  
    -webkit-transform:scale(0.5, 1);
    -moz-transform:scale(0.5, 1);
    transform:scale(0.5, 1);
}
form {
    text-align:center;
}

JavaScript

var text = $('text');
var bal = $('speach-baloon');
$('form').addEvent('keyup', function(){
    bal.set('html', text.value.replace(/\n/g, '<br>'));
});