JSFiddle - React, Tailwind, and code Playground

by Stanislas Ormières

HTML

<h1 id="myHeader" style="text-shadow: 5px 5px 3px #FF00FF">Hello World!</h1>

<p>
    <label for="opacity">Opacity</label>
    <input type="text" name="opacity" id="opacity" placeholder="Opacity" value="1">
</p>
<p>
    <label for="rosu">Rosu</label>
    <input type="text" name="rosu" id="rosu" placeholder="Rosu" value="1">
</p>
<p>
    <label for="albastru">Albastru</label>
    <input type="text" name="albastru" id="albastru" placeholder="Albastru" value="1">
</p>
<p>
    <label for="verde">Verde</label>
    <input type="text" name="verde" id="verde" placeholder="Verde" value="1">
</p>

JavaScript

function changeColor() {
  var op = document.getElementById('opacity').value;
  var red = document.getElementById('rosu').value;
  var green = document.getElementById('albastru').value;
  var blue = document.getElementById('verde').value;
  var color = 'rgba(' + red + ',' + blue + ',' + green + ',' + op / 100 + ')';

  document.getElementById('myHeader').style.textShadow = '5px 5px 3px ' + color;

}

document.getElementById('opacity').addEventListener('input', changeColor);
document.getElementById('rosu').addEventListener('input', changeColor);
document.getElementById('albastru').addEventListener('input', changeColor);
document.getElementById('verde').addEventListener('input', changeColor);