JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lt IE 8]>
<script src="http://h123.ru/js/a.ielt8.js"></script>
<script src="http://h123.ru/js/microdata-js.ielt8.js"></script>
<![endif]-->
<!--[if IE 8]>
<script src="http://h123.ru/js/a.ie8.js"></script>
<![endif]-->
<!--[if gt IE 7]><!-->
<script src="http://h123.ru/js/microdata-js.js"></script>
<!--<![endif]-->
<script src="a.js"></script>
<script src=" https://raw.github.com/termi1uc1/Microdata-JS/master/examples/microdataTemplater/microdataTemplater.js"></script>
<style>
ul, ol {
    padding-left: 20px;
    list-style-type: circle;
   }
</style> 

<section itemscope itemtype="template:chat" id=test>
    <header>
        <img itemprop=account.avatar data-tmpl-options='{"itemprop":"account.id GLOBAL.date?format=HHMMss","source":"data-src"}' data-src="i/av/#account.id#.jpg?#GLOBAL.date#" alt=Аватара>
        <p><span itemprop=account.name></span> (<span itemprop=account.nick></span>)
        <p itemprop=create_date data-tmpl-options='{"itemprop":"GLOBAL.date?format=dd_mm_yy_HH:MM:ss&update=1000"}'>
    </header>
    
    <ul class="data">
        <li itemprop=messages itemscope itemtype="template:chat/message" itemid="uuid:#from.id#:chat:message?datestamp=#GLOBAL.date#" data-tmpl-options='{"itemprop":"from.id GLOBAL.date?format=dd_mm.yyyy_HHMMss","source":"itemid","target":"itemid"}'>
            <span itemprop=from.name>
                Message from #from.name# (<span itemprop="from.nick"></span>)
            </span>
            <div itemprop=body>
    </ul>
</section>

Remote teamplate test (<b style="color:red">put files for you server for work</b>):
<section itemscope itemtype="template:chat" itemid="http://localhost/Microdata-JS/examples/microdataTemplater/tmpl.txt#testRemoteSection">
</section>

<p>

</p>

<section itemscope itemtype="template:chat" id="test_ppp">
    <header>
        ID:<p itemprop=account.id[]>#account.id#<span>|</span></p>
        <img itemprop=account.avatar data-tmpl-options='{"itemprop":"account.id","source":"data-src"}'...

JavaScript

alert("will start now")
    
    var global = window;
    
    
    function _isEmptyElement(element) {
        var isEmpty = !element.firstChild, i = 0;
        
        if(!isEmpty) {
            isEmpty = true;
            
            while((el = element.childNodes[i++]) && isEmpty)
                isEmpty = el.nodeType === 3 && el.nodeValue.trim() === "";
        }
        
        return isEmpty;
    }
    
    var data = {
        account : {
            id : 15654,
            name : "George Nikolaev",
            nick : "termi"
        },
        messages : [
            {
                from : {
                    id : 42134,
                    name : "Yusupov Andry",
                    nick : "sidor"
                },
                body : "Hi to <b>all</b>!!!"
            },
            {
                from : {
                    id : 325,
                    name : "Yusupov Andry",
                    nick : "sidor"
                },
                body : "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
            },
            {
                from : {
                    id : 512351,
                    name : "Vasa Shtovich",
                    nick : "vazelin"
                },
                body : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            },
            {
                from : {
                    id : 51234151,
                    name : "Chpreha Ugorgy",
                    nick : "sochfgy"
                },
                body : "Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?"
            },
            {
                from : {
                    id : 95679,
                    name : "Tyhon Gurgen",
                    nick : "gora"
         ...