JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.min.js"></script>
<main></main>

JavaScript

var Component = Ractive.extend({
  isolated: false,
  append: false,
  template: '{{#obj}}<p style="color:{{color}}; text-decoration:{{decoration}}"> "{{name}}" has been  {{status}}</p>{{/obj}}'

});

var ractive = new Ractive({
  el: 'main',
  template: '<div> Component will attach in a bit: <Component obj="{{jsonMessage}}"/> </div>',
  components: { 
      Component: Component 
  }
});

setTimeout(function(){
    
	ractive.set("jsonMessage", 
                {
        			"name": "Wilfred",  
        			"status": "DENIED",
        			"color": "red",
        			"decoration": "underline"
    			});
    
}, 300);