JSFiddle - React, Tailwind, and code Playground

by enginustun

HTML

<script src="https://cdn.jsdelivr.net/gh/muendiz/symponent@latest/src/symponent.min.js"></script>
<div id="container"></div>

JavaScript

var userObject = { name: 'John', surname: 'Doe' };
sym.createComponent(
  sym.createElement('div', { model: { user: userObject } }, 
    'Hello {user.name} {user.surname}!',
    sym.createElement('br'), // just for new line
    sym.createElement('input', { 
      value: '{user.name}',
      events: {
        input: function(event, element){
          element.model.user.name = event.target.value;
        }
      }
    })
  ),
  'container'
);