JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/SamMorrowDrums/ViewMachine/master/viewMachine.js"></script>
<script src="https://raw2.github.com/SamMorrowDrums/ViewMachine/master/templateMachine.js"></script>
<body>
</body>

JavaScript

// Example 1
var myList = ['These', 'Are', 'List', 'Elements'];
var $list = ViewMachine.makeList(myList);

//Add it to the DOM with jQuery
$('body').append($list);


// Example 2
var menu = [{home: "HOME"}, {users: "Users"}, {system: 'System Settings'}, {logs: 'Logs'}];

//Generate and fire straigh into the DOM
$('body').append(ViewMachine.makeList(menu));

//Interact
$('#home').click(function(e){
  alert('You clicked on HOME');
});

// Example 3

var keys = ['first name', 'last name', 'age', 'favourite fruits'];
var data = {
  'person 1': {
    'first name': 'Steve',
    'last name': 'Davis',
    'age': 20,
    'favourite fruits': ['Limes', 'Lemons', 'Pears']
  },
  'person 2': {
    'first name': 'Sam',
    'last name': 'Morrow',
    'age': 27,
    'favourite fruits': 'figs'
  },
  'person 3': {
    'first name': 'Steve',
    'last name': 'Davis',
    'age': 15,
    'favourite fruits': ['tomatoes', 'lychees']
  },
  'person x': {
    'first name': 'Kermit',
    'last name': 'The Frog',
    preferences: {
      food: 'Cookies',
      'favourite fruits': 'pineapple',
      friends: "Big Bird"
    }
  },
};
var $table = ViewMachine.makeTable(keys, data);

//Add it to the DOM with jQuery
$('body').append($table);