JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<div class="colorChange">Roar
    <div class="colorChange">Roar2
        <div class="colorChange">Roar3
            <div class="colorChange">...</div>
        </div>
    </div>
</div>
<div class="colorChange">Roar4</div>
<div class="colorChange">Roar5</div>
<button id="blue">BLUE</button>
<button id="red">RED</button>
<button id="cc">Current Color</button>

CSS

div {
    padding: 10px;
    background-color: green;
    margin: 2px;
}

JavaScript

$('#blue').on('click', function () {
    $('.colorChange').css({
        'background-color': 'blue',
        'color': 'blue'
    });
});

$('#red').on('click', function () {
    $('.colorChange').css({
        'background-color': 'red',
        'color': 'red'
    });
});

$('#cc').on('click', function(){
    alert($('.colorChange').css('background-color'));
});