JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/RactiveJS/Ractive/0.4.0/build/Ractive.js"></script>
<script id='main' type='text/ractive'>
    <a on-clickpd='sayGreeting'>{{greeting}}</a>
</script>

<div id="container1"/>

JavaScript

Ractive.events.clickpd = function ( node, fire ) {
    node.addEventListener('click', click)
    
    function click(e){
        e.preventDefault()
        fire({ node: node })
    }
    return { 
        teardown: function () {
            node.removeEventListener('click', click)
        } 
    }
}

var ractive = new Ractive({
    el: 'container1',
    template: '#main',
    data: { greeting: 'hello' },
    complete: function(){
        this.on('sayGreeting', function(e){
            alert(e.context.greeting)
        })
    }
});