JSFiddle - React, Tailwind, and code Playground

HTML

<div id="1">
    <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="2">
    <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="3">
    <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{
     border: 1px solid;
    box-shadow: 2px 2px 1px; 
     margin: 1em;
    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: black; /* [1] */
}

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

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

JavaScript

var colors = ['pink','purple','yellow','green','silver','lime']
setInterval(function(){
      
    for(var i=1;i<4;i++){
        var element=colors[Math.floor(Math.random()*colors.length)];
       document.getElementById(i).style.color = element;
     document.getElementById(i).style.borderColor = element;
    }
    
}, 500);