JSFiddle - React, Tailwind, and code Playground

by teresko

HTML

<div id="content">
    <ul class="comments">
        <li>
            <article>
                <div class="avatar"></div>
                <div class="containment">
                    <textarea></textarea>
                </div> 
            </article>
        </li>
    </ul>
    <ul class="comments">
        <li>
            <article>
                <p>Some comment</p>
            </article>
            <ul class="comments">
                <li>
                    <article>
                        <div class="avatar"></div>
                        <div class="containment">
                            <textarea></textarea>
                        </div>
                    </article>
                </li>
            </ul>            
        </li>
    </ul>    
</div>

CSS

#content { width: 250px; margin: 0 auto; background: green; }

ul.comments { margin: 0; }
ul.comments ul.comments { margin-left: 42px; }

.avatar { 
    width: 38px; 
    height: 38px;
    border: 1px solid black; 
    float:left; 
}
.containment{
    margin-left: 42px;
    border: 1px solid #aaa;
}
textarea { 
    width: 100%; 
    border:0; 
}