JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="vf-comment">
    <div class="vf-content"></div>
    <div class="vf-replies">
        <div class="vf-comment">
            <div class="vf-content"></div>
            <div class="vf-replies">
                <div class="vf-comment">
                    <div class="vf-content"></div>
                    <div class="vf-replies">
                        <div class="vf-comment">
                            <div class="vf-content"></div>
                            <div class="vf-replies">
                                <div class="vf-comment">
                                    <div class="vf-content"></div>
                                    <div class="vf-replies">
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.vf-comment {
 width: 100%;
 clear: both;
 margin: 0 0 10px 0;
}
.vf-content {
    height: 80px;
    width: 100%;
    background: #ccc;  
}
.vf-replies {
    margin: 10px 0 0 0;
    padding: 0 0 0 10%;
    width: 90%;
    clear: both;
    border: 1px solid #000;
}

JavaScript

var comment = $('.vf-comment').eq(0)
    
comment.animate({marginLeft:'-20%'},500);
$('.vf-replies', comment).eq(0).animate({width:'+=20%'},500);