JSFiddle - React, Tailwind, and code Playground

by JoeQuery

HTML

<font id='my-font' color="1A15EC"><p id="my-paragraph">I am colorful!</p></font>
<div id="buttons">
  <button id="blue-btn"><font color="1A15EC">Blue</font></button>
  <button id="green-btn"><font color="15EC46">Green</font></button>
  <button id="pink-btn"><font color="EC15B3">Pink</font></button>
</div>

JavaScript

var $font = document.getElementById('my-font');
var $blue = document.getElementById('blue-btn');
var $green = document.getElementById('green-btn');
var $pink = document.getElementById('pink-btn');

$blue.onclick = function(){
    $font.setAttribute('color', '1A15EC');
}

$green.onclick = function(){
    $font.setAttribute('color', '15EC46');
}

$pink.onclick = function(){
    $font.setAttribute('color', 'EC15B3');
}