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 even">
        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 even">
        lol
    </div>
</div>

CSS

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

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

JavaScript

currentBlue = 0;
currentSilver = 0;

colorizeBlue = function(index, element) {
    $(element).addClass("blue" + currentBlue);
    currentBlue = 1 - currentBlue;
    $(element).children().each(colorizeSilver);
};

colorizeSilver = function(index, element) {
    $(element).addClass("silver" + currentBlue);
    currentSilver = 1 - currentSilver;
    $(element).children().each(colorizeBlue);
};

$(".thread-even").each(colorizeBlue);
$(".thread-odd").each(colorizeSilver);