JSFiddle - React, Tailwind, and code Playground

by joe_sky

HTML

<script src="https://unpkg.com/[email protected]/dist/nornj.min.js"></script>
<script id="tmpl1" type="text/nornj">
  <div>
    <#each {{1 .. 20}}>
      <i class="item" style="margin-left:{{this * 2}}px;">Welcome to using the NornJ template engine! This is the {{this}} time</i><br>
    </#each>
    {{{main}}}
  </div>
</script>
<section id="container">
</section>

CSS

.item {
  color: purple;
}

Babel + JSX

const tmpl1 = nj.compile(document.getElementById('tmpl1').innerHTML);
const htmlMain = nj`
  <br>
  This is a nornj simple demo.
`();

document.getElementById('container').innerHTML = tmpl1({ main: htmlMain });