JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="test">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel distinctio placeat tempore iusto nostrum. Doloribus quaerat facilis aliquid animi, nam blanditiis, excepturi quas tempora provident incidunt, natus sequi at! Eos.
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel distinctio placeat tempore iusto nostrum. Doloribus quaerat facilis aliquid animi, nam blanditiis, excepturi quas tempora provident incidunt, natus sequi at! Eos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel distinctio placeat tempore iusto nostrum. Doloribus quaerat facilis aliquid animi, nam blanditiis, excepturi quas tempora provident incidunt, natus sequi at! Eos.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel distinctio placeat tempore iusto nostrum. Doloribus quaerat facilis aliquid animi, nam blanditiis, excepturi quas tempora provident incidunt, natus sequi at! Eos.
</div>
<div id="demo" class="box"></div>

CSS

.box {
    width: 100%;
    height: 200px;
    background: red;
}

JavaScript

function getColor(){
    var a = document.querySelector('#test');
    var color = a.clientHeight;
    document.querySelector('#demo').style.background = "rgb(" + (color * 1.1)  + "," + (color / 2)  + "," + color + ")";
    requestAnimationFrame(getColor)
}
getColor();