JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<!-- Selectors -->
<div id="test1">
    <h5>test0</h5>
    <p>test1</p>
    <div id="test2">
        <p>test2</p>
        <p>test2.1</p>
    </div>
    <div id="test3" class="uses-class">
        <p>test3</p>
        <div id="test4">
            <p>test4</p>
            <div id="test5" class="also-uses-class">
                <p>test5</p>
            </div>
        </div>
    </div>
<div>

CSS

#test1 {
    background: red;
}
#test2 {
    background: blue;
}
#test3 {
    background: grey;
}
#test4 {
    background: purple;
}
#test1 > p {
    color: yellow;
}
.uses-class > p {
    color: #336699;
}
.also-uses-class > p {
    color: orange;
}
#test1 h5 {
    color: white;
}
#test1 h5 ~ p {
    color: white;
}
#test1 > p:first-letter {
    color: black;
}
#test2 > p:nth-child(1) {
    color: yellow;
}