JSFiddle - React, Tailwind, and code Playground

HTML

<div id="color_bg">
<h3>Que Color queres de fondo?</h3>
<a rel="red">Rojo</a>
<a rel="black">Negro</a>
<a rel="yellow">Amarillo</a>
</div>
<br />
<div id="color_txt">
<h3>Que colore de letra?</h3>
<a rel="red">Rojo</a>
<a rel="black">Negro</a>
<a rel="yellow">Amarillo</a>
</div>
<br />
<div id="muestra">Esto es una muestra</div>

<form action="guardar.php" method="post"><button id="guardar">Guardar</button><input type="hidden" id="reglas_css" /></form>

CSS

#muestra {
    width:250px;
    height:250px;
    border:1px solid black;
    margin-top:20px;
}

#color_bg a, #color_txt a {
    color:#03C;
    font-size:14px;
    text-decoration:underline;
    cursor:pointer;
    
}

JavaScript

var opciones = [];
    $("#color_bg a").click(function(){
        opciones[0] = "background: " + this.rel;
        actualizar();
    })
    
    $("#color_txt a").click(function(){
        opciones[1] = "color: " + this.rel;
        actualizar();
    })
    
    function actualizar(){
        $("head").append("<style>#muestra { " + opciones.join(";") + " } </style>")
    }

    $("#guardar").click(function(){
        $("#reglas_css").val(opciones.join(";"));
        alert("Las reglas CSS: \n" + opciones.join(";") + "\nse han guardado" )
        return false;
    })