JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div class="comment-bar">
    <div style="margin-left: 50%; background: blue; margin-top: 2px;" class="comment-box" author="Alan Blaine" comment="EF">AB</div>
    <div style="margin-left: 55%; background: blue; margin-top: 2px;" class="comment-box" author="Brian Connelly" comment="FG">BC</div>
    <div style="margin-left: 60%; background: blue; margin-top: 2px;" class="comment-box" author="Clive Darnell" comment="GH">CD</div>
</div>
<div class="show-comment"></div>

CSS

.comment-bar {
    width:  100%;
    height: 24px;
    background: rgba(0,0,0,0.4);
}
.comment-box {
    height: 20px;
    width:  20px;
    position: absolute;
    color: white;
    font-size: 10px;
    line-height:20px;
    text-align: center;
    margin-top: 10px;
}
.show-comment {
    width: 100%;
    display: none;
}
}

JavaScript

$('.comment-box').click(function(e) {
   e.preventDefault();
    $('.show-comment').text( $(this).attr('author') + ': ' + $(this).attr('comment') ).show();
});