JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div class="blue">
    <a>test (blue)</a>
    <a>test (blue)</a>
    
    <div class="red">
        <a>test (red)</a>
        <a>test (red)</a>
        
        <div class="blue">
            <a>test (blue)</a>
            <a>test (blue)</a>
            
            <div class="red">
                <a>test (red)</a>
                <a>test (red)</a>
                
                <div class="blue">
                    <a>test (blue)</a>
                    <a>test (blue)</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

div, a {
    padding: 0.5em;
}

a {
    display: block;
    background-color: inherit;
}

.blue:not(a) {
    background-color: #0000FF;
    box-shadow: 5000em 0 0 0 #FFF inset;
}

.red:not(a) {
    background-color: #FF0000;
    box-shadow: 5000em 0 0 0 #FFF inset;
}

JavaScript

// nested styles code (messed up)