JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id = "ins">
</div>
CSS
body{
background-color: #ffffff;
}
td {
padding: 10px;
}
.bubble{
background-color: #FAFAFA;
border-radius: 5px;
//box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
//padding: 10px 18px;
position: relative;
vertical-align: top;
width: 90%;
}
.bubble::before {
background-color: #FAFAFA;
content: "\00a0";
display: block;
height: 16px;
position: absolute;
top: 11px;
transform: rotate( 29deg ) skew( -35deg );
-moz-transform: rotate( 29deg ) skew( -35deg );
-ms-transform: rotate( 29deg ) skew( -35deg );
-o-transform: rotate( 29deg ) skew( -35deg );
-webkit-transform: rotate( 29deg ) skew( -35deg );
width: 20px;
}
.me {
float: left;
margin-bottom: 5px;
}
.me::before {
//box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
left: -9px;
}
JavaScript
url = "https://forge-allura.apache.org/rest/p/allura/tickets/_discuss/thread/2abc9fd7/";
$.ajax({
type: "GET",
dataType: 'json',
url: url,
success: function(data) {
d = data.thread.posts;
inside = '<table>';
//inside += '<th></th><th>Score</th><th>User Handle</th>'
for(i = 0; i < d.length; i++){
inside += '<tr>';
inside += '<td valign="top">' + '<img src="https://secure.gravatar.com/avatar/8e3d029ca698f932fa30b1b2beb24f97?r=pg" width = "40px"/>' + '<br/><i style="font-size: 10px;">'+ d[i].author +'</i></td>'
inside += '<td class="bubble me"><p>'+ d[i].text;
inside += '</p></tr>';
}
inside += '</table>';
document.getElementById("ins").innerHTML = inside;
},
error: function(e) {
console.log(e.message);
document.getElementById("ins").innerHTML = e.message;
}
});