JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="" id="letters"/><br>
<div id="color" style="padding-top:15px;"></div>

JavaScript

$("#letters").keyup(function (obj){
    letter=String.fromCharCode(obj.keyCode);
    
    switch(letter){
        case "A":
            $("<span style='padding:10px;background-color:#000'></span>").appendTo("#color");
          break;
        case "B":
          $("<span style='padding:10px;background-color:#3f709b'></span>").appendTo("#color");
          break;
        case "1":
           $("<span style='padding:10px;background-color:#f9521d'></span>").appendTo("#color");
          break;
        default:
            alert("Only letters and numbers!!");
    };
});