JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/muut/riotjs/master/riot.js"></script>
<my-component>

JavaScript

var myComponent = 'my-component'
	myComponentHTML = [
		'<h1>{ opts.title }</h1>',
		'<p>{ opts.description }</p>',
        '<my-list-item each="{ opts.items }">'
	].join('')
	myListItem = 'my-list-item'
	myListItemHTML = [
        '<input type="checkbox" onchange="{ onChange }">',
        '<span if="{ opts.isActive }">I am active</span>',
	].join('')
function generateItems (amount) {
	var items = []
	while (--amount) {
		items.push({
			isActive: false
		})
	}
	return items
}
    
riot.tag(myComponent, myComponentHTML,function (opts) {
    var self = this
    function loop () {
        opts.items = generateItems(~~(1000),{
            isActive:false
        })
        self.update()
        setTimeout(loop,2000)
    }
    loop()
})
riot.tag(myListItem,myListItemHTML,function(opts){
    this.onChange = function(e) {
        opts.isActive = e.target.checked
   }
})

riot.mount(myComponent, {
    title: 'hello world',
    description: 'mad world',
    items: generateItems(1000)
})