JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_1.0.alpha.last.js"></script>
<div al-repeat="item in data">
  <input al-xy value="{{item.name}} {{item.top}}" /> <br/>
  <box al-xy="item.box">{{item.box}}</box>
</div>

CSS

box {
  border: 1px solid blue;
  height: 50px;
  width: 50px;
  display: inline-block;
}

JavaScript

var app = {
	data: [
  	{name: 'Linux'},
  	{name: 'Windows'},
  ]
};

alight.d.al.xy = function(app, el, name) {
  this.on(el, 'mousemove', (e) => {
  	this.setValue(name || 'item.top', e.x + 'x' + e.y);
    this.scan();
  })
}

alight('body', app);