JSFiddle - React, Tailwind, and code Playground

HTML

<body> 
<button id="grey">Grey</button>
<button id="red">Red</button>
<button id="pink">Pink</button>
<button id="blue">Blue</button>
<button id="green">Green</button>
<button id="yellow">Yellow</button>
<button id="orange">Orange</button> 
    
            <label for="bg2">Background:</label> 
        <input type="color" class="theme" id="bg2" onchange="javascript:document.getElementById('full').style.backgroundColor=document.getElementById('bg2').value;"/>
        <!-- (with javascript)-->
</body>

JavaScript

$(document).ready(function() {
 $("button#grey").click(function(){ $("body").css("background","#111") }) 
 $("button#red").click(function(){ $("body").css("background","red") }) 
 $("button#pink").click(function(){ $("body").css("background","pink") }) 
 $("button#blue").click(function(){ $("body").css("background","blue") }) 
 $("button#green").click(function(){ $("body").css("background","green") }) 
 $("button#yellow").click(function(){ $("body").css("background","yellow") }) 
 $("button#orange").click(function(){ $("body").css("background","orange") }) });

$(document).ready(function(){
     $("#bg").change(function(){
        $("#full").css("background-color",$("#bg").val());
    });
});