JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

HTML

<textarea id="desc"></textarea>
<div class="idea-description"></div>

CSS

.idea-description {
    position : relative;
    width : 400px;
}
.idea-description p {
    background-color : seafoam;
    position : relative;
    padding-right : 20px;
}
.idea-description p>i {
    display : block;
    position : absolute;
    top : 0;
    right : 0;
    background-color : blue;
    color : white;
    border-radius : 5;
    padding : 3px;
}
.comment-thread {
    display : none;
    position : absolute;
    width : 100px;
    height : 200px;
    background-color : red;
    right : -120px;
    transition : top 1000ms;
}
.comment-thread.visible {
    display : block;
}

JavaScript

var _desc = document.getElementById('desc');
var container = document.getElementsByClassName('idea-description')[0];
var thread = document.createElement('div');

var comments = [{
    title: 'first'
}, {
    title: 'second'
}, {
    title: 'third'
}, {
    title: 'forth'
}, {
    title: 'fifth'
}];


thread.className = 'comment-thread';


container.appendChild(thread);

_desc.addEventListener('change', function () {
    var desc = this.value.split(/\n\n/);

    desc.forEach(function (item, index, array) {
        var p = document.createElement('p');
        var icon = document.createElement('i');
        icon.innerHTML = [1, 2, 3, 4, 5, 6][Math.floor(Math.random() * 6)];

        p.setAttribute('data-index', index);
        p.innerHTML = item;
        p.appendChild(icon);

        container.appendChild(p);

        icon.addEventListener('click', function () {
            thread.className = 'comment-thread visible';
            thread.innerHTML = comments[p.getAttribute('data-index')].title;
            thread.style.top = (p.getBoundingClientRect().top - container.getBoundingClientRect().top) + 'px';
        });

    }.bind(this));

});