JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>Across the <strong>sea</strong> of <em>space</em>, the <a class="btn" href="#">stars</a> are <span>other</span> <button>suns</button>.</p>
</div>
<div>
    <p>Across the <strong>sea</strong> of <em>space</em>, the <a class="btn" href="#">stars</a> are <span>other</span> <button>suns</button>.</p>
</div>
<div id="disco">
    <p>Across the <strong>sea</strong> of <em>space</em>, the <a class="btn" href="#">stars</a> are <span>other</span> <button>suns</button>.</p>
</div>

CSS

div:nth-child(1){
    color: red;
}

div:nth-child(2){
    color: blue;
}


div {
    margin: 1em;
    border: 1px solid currentColor;
    box-shadow: 2px 2px 1px currentColor;
    padding: 10px;
}

/**
 * 1. Should get color from <div>
 * 2. Should get color from self (<strong>)
 */

strong {
    color: inherit; /* [1] */
    background-color: currentColor; /* [2] */
}

/**
 * 1. Should be black from <em>
 */

em {
    color: black;
    background-color: currentColor; /* [1] */
}

span:after {
    content: "";
    display: inline-block;
    width: 30px;
    height: 3px;
    background-color: currentColor;
    vertical-align: middle;
}

button,
.btn {
    color: inherit;
    padding: 0.25em;
    border-width: 2px;
    border-style: solid;
    border-color: currentColor;
    background-color: transparent;
}

JavaScript

var element = document.getElementById("disco");
var colors = ['pink','purple','yellow','green','silver','lime']
setInterval(function(){
     element.style.color = colors[Math.floor(Math.random()*colors.length)];
}, 500);