JSFiddle - React, Tailwind, and code Playground

HTML

<div id='box_container'>

JavaScript

Box = Ractive.extend({
  template: "<p>the box area is {{area}}</p>",
  computed: { area: '${width} * ${height}' }
});

var boxes_model = new Ractive({
  el: '#box_container',
    template: '{{#boxes}}<box width="{{width}}" height="{{height}}"/>{{/}}',
  data: {
    boxes: [
      { width: 20, height: 40 },
      { width: 30, height: 45 },
      { width: 20, height: 20 }
    ]
  },
  components :{box : Box}
});

boxes_model.unshift('boxes',{width: 5, height: 6});