JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="editor"></div>

CSS

#editor{
    width: 500px;
    margin: 20px auto;
    border-left: 1px dashed #999;
    border-right: 1px dashed #999;
    padding: 0 20px;
}

JavaScript

var element = document.getElementById('editor');

var allowed = ['p','b','u','i','a','pre','blockquote','hr'];

var _collection = [
    {
        tag: 'p',
        atts: {},
        text: 'Hello, World!'
    }, {
        tag: 'p',
        atts: {style:'color:red'},
        text: 'Goodbye, World!'
    }
];

var i,
    data='';

for(i=0; _collection.length; i++){
    var el = _collection[i];
    data += [
        '<'+el.tag+'>',
            el.text,
        '</'+el.tag+'>'
    ].join('');
    element.innerHTML = data;
}