JSFiddle - React, Tailwind, and code Playground

HTML

<div class="comment thread-even">
    Herp
    <div class="comment">
        Derp
        <div class="comment">
            Herp
            <div class="comment">
                Derp
            </div>
        </div>
    </div>
    <div class="comment">
        lol
    </div>
</div>
<div class="comment thread-odd">
    Herp
    <div class="comment">
        Derp
        <div class="comment">
            Herp
            <div class="comment">
                Derp
            </div>
        </div>
    </div>
    <div class="comment">
        lol
    </div>
</div>
<div class="comment thread-even">
    Herp
    <div class="comment">
        lol
    </div>
    <div class="comment">
        lol?
    </div>
    <div class="comment">
        lol!
    </div>
</div>
<div class="comment thread-odd">
    Herp
    <div class="comment">
        lol
    </div>
    <div class="comment">
        lol?
    </div>
    <div class="comment">
        lol!
    </div>
</div>

CSS

.blue0 { background: #88c;}
.silver0  { background: #888;}
.blue1 { background: #bbf;}
.silver1  { background: #bbb;}

.comment { margin: 5px; margin-left: 10px; }

JavaScript

colorizeBlue = function(index, element) {
    element.className += " blue" + index % 2;
    forEachWithIndex(element.children, colorizeSilver);
};

colorizeSilver = function(index, element) {
    element.className += " silver" + index % 2;
    forEachWithIndex(element.children, colorizeBlue);
};

forEachWithIndex = function(elements, func){
    for (var i = 0; i < elements.length; i++){
        func(i, elements[i]);
    }
}

forEachWithIndex(document.getElementsByClassName("thread-even"), colorizeBlue);
forEachWithIndex(document.getElementsByClassName("thread-odd"), colorizeSilver);