JSFiddle - React, Tailwind, and code Playground

by Omar Al-Ithawi

HTML

<script src="https://cdn.rawgit.com/amasad/DOMQL/master/domql.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <style>
      body,span{
        padding: 10px
      }
      input {
        margin: 10px
        }
      ol {
        border: solid 1px gray;
        min-height:100px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <!-- Generate main view -->
    <script type="text/domql">
      INSERT INTO (SELECT DIV FROM BODY WHERE ID='container') VALUES (
        CREATE ELEMENT h2 (
         innerText 'TODOS:'
        ),
        CREATE ELEMENT SPAN (
          innerText 'Count: 0',
          id 'count'
        ),
        CREATE ELEMENT OL (
         class 'list' 
        )
      );
      INSERT INTO (SELECT DIV FROM BODY WHERE ID='container') VALUES (
        CREATE ELEMENT LABEL (
          innerHTML 'Controls:'
        ),
        INSERT INTO (CREATE ELEMENT DIV(class 'controls')) VALUES (
            CREATE ELEMENT LABEL (
              innerHTML 'TODO:'
            ),
            CREATE ELEMENT INPUT (
              id 'input-name',
              type 'text'
            ),
            CREATE ELEMENT LABEL (
              innerHTML 'Time:'
            ),
            CREATE ELEMENT INPUT (
              id 'input-time',
              type 'text'
            ),
            CREATE ELEMENT INPUT (
              type 'submit',
              value 'add',
              onclick 'DOMQL.tmpl("add-list-item",
                                   DOMQL.tmpl("get-input", "input-name"),
                                   DOMQL.tmpl("get-input", "input-time")
                                  )
                       DOMQL.tmpl("update-count", DOMQL.tmpl("get-count"))'
            ),
            CREATE ELEMENT BR(),
            CREATE ELEMENT INPUT (
              type 'submit',
              value 'delete all',
              onclick 'DOMQL.tmpl("delete-all")
                       DOMQL.tmpl("update-count",...