JSFiddle - React, Tailwind, and code Playground

by AntonLapshin

HTML

<div id="body" class="c1-comments-on c1-comments-line">
   <p>
        Some 
            <span class="c1-comment">text
                <span class="c1-line">x</span>
                <span class="c1-comment-body" style="top: 200px">
                    <span class="c1-reply" title="Reply"> </span>
                    <span class="c1-comment-item">
                        <span class="c1-comment-header">Author1: 10.12.2013</span>
                        Some text 1
                    </span>
                    <span class="c1-comment-item">
                        <span class="c1-comment-header">Author2: 11.12.2013</span>
                        Some text 1
                    </span>                    
<!--                     <span class="c1-comment-item" data-author="Author2" data-date="11.12.2012" data-text="Some text 2">Some text 2</span>
                    <span class="c1-comment-item" data-author="Author3" data-date="14.12.2012" data-text="Some text 3">Some text 3</span> -->
                </span>
            </span>
            
            <br/>
            
            <span class="c1-comment">text
                <span class="c1-comment-body" style="top: 150px">
                    <span class="c1-comment-item" data-author="Author1" data-date="10.12.2012" data-text="Some text 1">Some text 1</span>
                </span>
            </span>    
        fwerf
    </p>
</div>

CSS

.c1-comments-on {
    padding-right: 220px;
}

.c1-comments-line:before{
    content:'';
    position: absolute;
    z-index: 2;
    height: 100%;
    width: 1px;
    right: 220px;
    margin-top: -20px;
    background-color: #bbb;
}

.c1-comments-on .c1-comment{
    border-left: 1px solid white;
    border-right: 1px solid white;
}

.c1-comments-on .c1-comment:hover{
    background: #fcabbd;
    border-left: 1px solid #b5082e;
    border-right: 1px solid #b5082e;
}

/* .c1-comments-on .c1-comment:hover:after{
    position: absolute;
    display: block;
    background: #b5082e;
    height: 1px;
    width: 100%;
    z-index: 1;
    top: 0;
    right: 240px;
    content: ' ';
} */

.c1-comments-on .c1-comment-body { display: block; }
.c1-comment-body {
    padding-left: 5px;
    position: absolute;
    display: none;
    z-index: 0;
    right: 0;
    width: 214px;
    color: black;
    border: 1px solid white;
    border-right: 1px solid white !important;
    background-color: white;
}

.c1-comment-body:hover {
    background-color: #f9f9f9;
    border: 1px solid #b5082e;
}

.c1-comment:hover .c1-comment-body
{
    background-color: #f9f9f9;
    border: 1px solid #b5082e;
}

.c1-reply {
    display: none;
    position: absolute;
    background-image: url('https://cdn2.iconfinder.com/data/icons/crystalproject/16x16/actions/mail_reply.png');
    /* background-image: url('../images/comments/reply.png'); */
    width: 16px;
    height: 12px;
    top: 3px;
    right: 3px;
    cursor: pointer !important;
    z-index: 4;
}

.c1-comment-body:hover .c1-reply {
    display: block;
}

.c1-comment-item {
    margin-left: 20px;
    margin-top: 5px;
    display: block;
    font-size: 100%;
}

.c1-comment-header {
    font-size: small !important;
    display: block !important;
    font-weight: bold;    
}

.c1-comment-item:nth-child(2) {
    margin-left: 0 !important;
    margin-top: 0 !important;
}

JavaScript

//alert($('.c1-comment').eq(0).css('top'));
//alert($('.c1-comment').eq(0)[0].style.height);

//alert($('.c1-comment-body').eq(1).height());