JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<h2 dx-bind="title">Default website title.</h2>
<h4 dx-bind="summary">Default message summary, that comes right after the title.</h4>

<p dx-collection="contents" dx-bind="content in contents">Default content.</p>

<div dx-collection="notes">
    <p dx-bind="notes.content">Default note contents.</p>
</div>

CSS

*
{
    box-sizing: border-box;
    margin: 6px 0;
}

[dx-bind],[dx-collection],.bind-selected,.collection-selected
{
    padding: 0.2em;
}

[dx-bind],.bind-selected
{
    background-color: red;
}

[dx-collection],.collection-selected
{
    background-color: blue;
}

[dx-bind][dx-collection]
{
    background-color: green;
}

.bind-selected
{
    color: white;
}

.collection-selected
{
    text-decoration: underline;
}

JavaScript

$(function() {
    var binds = $('[dx-bind]');
    var collections = $('[dx-collection]');
    
    binds.addClass('bind-selected').each(function(){
        $(this).text( $(this).attr('dx-bind') ).removeAttr('dx-bind');
    });
    
    collections.addClass('collection-selected').each(function(){
        for (var i = 0; i < 3; i++) {
            $(this).clone(true).insertAfter(this).removeAttr('dx-collection');
        }
        
        $(this).remove();
    });
});