JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/ractive"></script>
<main>
    <h1>Progressive enhancement!</h1>
    
    <p>Ractive can now use the HTML that's already on the page – e.g. rendered from an isomorphic component in a Node.js app (though Ractive doesn't care where the markup came from, and you don't have to pepper it with special attributes. It just works™).</p>
    
    <label>
        <input type='number' value='42'/>
        answer
    </label>
    
    <p>It even works with two-way binding! <strong>The answer is ...</strong></p>
    <button disabled>disabled until the app starts</button>
</main>

<script id='template' type='text/ractive'>
    <h1>Hello {{name}}!</h1>
    <p>We're using Ractive.js version {{version}}</p>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

.error {
    color: #d00;
    font-family: monospace;
}

JavaScript

var h1 = document.querySelector( 'h1' );
var label = document.querySelector( 'label' );
var p = document.querySelector( 'p' );
var button = document.querySelector( 'button' );

setTimeout( () => {
    var ractive = new Ractive({
        el: 'main',
        template: `
			<h1>Progressive enhancement!</h1>

			<p>Ractive can now use the HTML that's already on the page – e.g. rendered from an isomorphic component in a Node.js app (though Ractive doesn't care where the markup came from, and you don't have to pepper it with special attributes. It just works™).</p>

			<label>
				<input type='number' value='{{answer}}'/>
				answer
			</label>

			<p>It even works with two-way binding! <strong>The answer is {{answer}}</strong></p>

			<button on-click='alert("it works!")'>click me!</button>`,
        enhance: true,
        alert: msg => alert( msg )
    });
    
    // confirm that Ractive hasn't trashed the original DOM
    console.log( document.querySelector( 'h1' ) === h1 );
    console.log( document.querySelector( 'label' ) === label );
    console.log( document.querySelector( 'p' ) === p );
    console.log( document.querySelector( 'button' ) === button );
}, 2000 );