JSFiddle - React, Tailwind, and code Playground

by develax

HTML

<script src="https://cdn.jsdelivr.net/npm/raz@0.0.80/raz.js"></script>
<script type="text/javascript">
var template = `
<h1>@Model.title</h1>
<strong>Days of the week:</strong>
<ul>
@for (var i = 0; i < Model.days.length; i++) {
    <li>@Model.days[i]</li> 
}
</ul>
<div>Today is <i>@Model.today()</i>.</div>
<br />
<hr />
<div>
<h2>The Razor-syntax template used in this example</h2>
<pre>
    @Model.template
</pre>
</div>`;
var model = {
    title: document.title,
    day: new Date().getDay(),
    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    today: function () {
      return this.days[this.day];
    },
    template
  }
document.body.insertAdjacentHTML('afterbegin', raz.render(template, model));
</script>

CSS

pre { 
    background-color:black; 
    color:#f3eeb5; 
    padding: 0 0.5rem; 
    border: 1rem ridge #ababab;
  }