JSFiddle - React, Tailwind, and code Playground

by Timo Japan

HTML

<input id="input01" size="4" maxlength="1" autofocus />
<input id="input02" size="4" maxlength="1" />
<input id="input03" size="4" maxlength="1" />
<input id="input04" size="4" maxlength="1" />
<input id="input05" size="4" maxlength="1" /><br />

<code>
<span id="span01"></span>
<span id="span02"></span>
<span id="span03"></span>
<span id="span04"></span>
<span id="span05"></span>
</code>

CSS

input{
    color:#FFF;
}

JavaScript

// Define color separately
var color01 = "3173d8";
var color02 = "416cd9";
var color03 = "5e5bdb";
var color04 = "8248dd";
var color05 = "a335df";

// Add css style to specific input
$('#input01').css('background', '#'+color01);
$('#input02').css('background', '#'+color02);
$('#input03').css('background', '#'+color03);
$('#input04').css('background', '#'+color04);
$('#input05').css('background', '#'+color05);

// Get value and put into specific span
$('#input01').keyup(function() { $('#span01').html('[color=' + color01 + ']' + $(this).val() + '[/color]');});
$('#input02').keyup(function() { $('#span02').html('[color=' + color02 + ']' + $(this).val() + '[/color]');});
$('#input03').keyup(function() { $('#span03').html('[color=' + color03 + ']' + $(this).val() + '[/color]');});
$('#input04').keyup(function() { $('#span04').html('[color=' + color04 + ']' + $(this).val() + '[/color]');});
$('#input05').keyup(function() { $('#span05').html('[color=' + color05 + ']' + $(this).val() + '[/color]');});