JSFiddle - React, Tailwind, and code Playground

HTML

<textarea name="message">
    <input type="text" value="TextTwo" id="texttwo" />
    <input type="text" value="DataOne" id="dataone" />
    <input type="text" value="NumberTwo" id="numbertwo" />
    <input type="text" value="TextOne" id="textone" />
    <input type="text" value="DataTwo" id="datatwo" />
    <input type="text" value="NumberOne" id="numberone" />
</textarea>
<button>process</button>

CSS

textarea {
    width:300px;
    min-height:150px;
}
.data {
    text-align:center;
}
.text {
    text-align:left;
}
.number {
    text-align:right;
}

JavaScript

$('button').click(function () {
    var code = $('textarea[name=message]').val(),
        $code = $('<div />').html(code),
        classes = {'Text': 'text', 'Data': 'data', 'Number': 'number'};

    if ($('#output').length < 1) {
        $("body").append('<h2>Output</h2><textarea id="output" rows="10" cols="100"></textarea>');
    }
        
    $('input', $code).each(function(){
        var t = this,
            $t = $(this);
        
        for(key in classes){
            if(t.value.indexOf(key) > -1){
                $t.addClass(classes[key]);
                return;
            }
        }
    });
    
    $('#output').val($code.html());
});