JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<article class="wide">
            <div id="comments-wrapper">
                <ul>
                    <li><img src="http://ext.err.ee/avatar.ashx?user=mixro" alt="avatar"></li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum pretium velit et aliquet. In hac habitasse platea dictumst. Donec facilisis bibendum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac.</li>
                    <li><a href="#">Reply</a></li>
                </ul>
                <ul>
                    <li><img src="http://blog.us.playstation.com/wp-content/uploads/avatars/avatar_97757.jpg?m=1309289747" alt="avatar"></li>
                    <li>Vivamus consectetur urna non ligula auctor at gravida orci dignissim. Proin lorem enim, porta eget scelerisque eu, vestibulum vitae nisl. Mauris eget lectus a tellus gravida rhoncus. Fusce eu dui in ipsum sollicitudin aliquet. Morbi quis nibh sem id. </li>
                    <li><a href="#">Reply</a></li>
                </ul>
                <ul>
                    <li><img src="http://blog.us.playstation.com/wp-content/uploads/avatars/avatar_97757.jpg?m=1309289747" alt="avatar"></li>
                    <li>Integer egestas faucibus augue, a porta enim ornare a. Suspendisse leo dolor, fringilla vitae aliquet at, dictum et mauris. In consequat, mi ac imperdiet sagittis, enim lorem sollicitudin augue, vulputate posuere dolor ipsum a ligula. Vivamus nullam.</li>
                    <li><a href="#">Reply</a></li>
                </ul>
                <ul class="sub-comment">
                    <li><img src="http://ext.err.ee/avatar.ashx?user=mixro" alt="avatar"></li>
                    <li>Proin sit amet erat in lacus accumsan interdum sit amet sed lacus. Cras nisi orci, ullamcorper sit amet aliquet eu, congue dapibus magna. Aliquam nec arcu tortor, nec scelerisque nunc. Nullam libero purus, egestas non dapibus at, pharetra at posuere. </li>
               ...

CSS

article div#comments-wrapper li, article div#comments-wrapper ul {
    list-style:none;
    margin:0px;
    padding:0px;
}
article div#comments-wrapper ul {
    width:100%;
    height:auto;
    margin-bottom:5px;
    float:left;
}
article div#comments-wrapper li {
    height:auto;
    padding:5px;
    float:left;
}
article div#comments-wrapper li:nth-child(1), article div#comments-wrapper li:nth-child(1) img {
    width:50px;
    height:50px;
    margin:0px;
}
article div#comments-wrapper li:nth-child(2) {
    width:460px;
    min-height:50px;
    text-align:justify;
    background-color:#FFF;    
}
article div#comments-wrapper li:nth-child(3) {
    width:90px;
    padding-top:22px;
    height:33px;
    background-color:rgba(0, 0, 0, 0.04);
    text-align:center;
}
article div#comments-wrapper ul.sub-comment {
    width:570px;
    margin-left:60px;    
}
article div#comments-wrapper ul.sub-comment:before {
    width:1px;
    height:37px;
    background-color:blue;
    position:absolute;
    margin-left:-595px;
    margin-top:-6px;
    content:'';
}
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before {
    width:1px;
    height:67px;
    background-color:red;
    position:absolute;
    margin-left:-595px;
    margin-top:-36px;
    content:'';
}
article div#comments-wrapper ul.sub-comment:after {
    width:29px;
    height:1px;
    background-color:#e4e4e4;
    position:absolute;
    margin-left:-595px;
    margin-top:30px;
    content:'';
}
article div#comments-wrapper ul.sub-comment li:nth-child(2) {
    width:495px;    
}