JSFiddle - React, Tailwind, and code Playground

by IgorMinar

HTML

<div xmlns:foo="http://foo.bar">
    <div>
        <foo:bar>
            <div>hello foo:bar!</div>
        </foo:bar>
        <foo:baz>
            <div>hello foo:baz!</div>
        </foo:baz>
    </div>
    <hr>
    <div>
        <foo-bar>
            <div>hello foo-bar! (the only one working in IE8)</div>
        </foo-bar>
        <foo-baz>
            <div>hello foo-baz!</div>
        </foo-baz>
    </div>
</div>

CSS

div {
    border: 1px solid grey;
    padding: 10px;
}

foo-bar, foo-baz {
    display: block;
    border: 2px solid red;
    padding: 10px;
}

foo\:bar, foo\:baz {
    display: block;
    border: 2px solid green;
    padding: 10px;
}

JavaScript

// IE<9 shiv
document.createElement('foo:bar');
document.createElement('foo-bar');