JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result"></div>

CSS

.wrapper {
    background: #f0f0f0;
    border: 1px solid silver;
    border-radius: 4px;
    float: left; 
    margin: 20px;
    width: 90%;
}

.wrapper > * { padding: 20px 10px; }
.box {
    float: left;
}
label {
    text-transform: uppercase;
    font-weight: bold;
}
textarea {
    width: 200px;
    height: 100px;
    font-size: 14px;
}

JavaScript

var JSTemplate = function()
{
    this.render = function(json, template) {
        var html = '';

        if(json.length != undefined) {
            for(var i = 0; i < json.length; i++) {
                html += this.parse(json[i], template);
            }
        } else {
            html += this.parse(json, template);
        }
    
        return html;
    };

    this.parse = function(json, template) {
        var pattern = /\@\{(\w*)\}/g;
    
        return (template).replace(pattern, function(key) {
            return json[key.slice( 2, -1 )];
        });
    };
};

var View = {

    box: '<div class="box"><label>@{key}</label><br>'+
    '<textarea>@{value}</textarea></div>'

};