JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id='app'></div>

<script id='template' type='text/ractive'>
    <h1>Ractive.js - {{>localization}}</h1>
    <p>{{>hello { name: user.name } }}</p>
    <p>{{>language }}</p>
    <h3>{{>'Київ'}}</h3>
    <h2>i18n 
    {{>i18n data:localization}}
    </h2>
    <input type='radio' name='{{lang}}' value='en'/>Eng
    <input type='radio' name='{{lang}}' value='ru'/>Rus
		
</script>

JavaScript

var translations = {};

translations["en"] = {
    localization: 'localization example',
    hello : 'Hello <strong>{{name}}</strong> and have a nice day!',
    language: 'Language: {{lang}}',
    lang: 'English' ,
    Київ: 'Kiev'
}

translations["ru"] = {
    localization: 'пример локализации',
    hello: "Привет <strong>{{name}}</strong> хорошего тебе дня!",
    language: 'Язык: {{lang}} ',
    lang: 'Русский',
    Київ: 'Київ'
}

model = {
    lang: 'ru',
    user: {
        name: 'Sergey',
    }
};

App = new Ractive({
    el: '#app',
    template: '#template',
    data: model,
    partials: {
    	i18n: function ( data ) {
            // assuming data.partial is the string token of a registered partial:
            console.log(data)
            return translations.en[data];
        }
      }
});

App.observe( 'lang', function ( lang ) {
		return;
    partials = translations[ lang ];
    
    // maybe we should have a resetPartials() method to
    // do them all in one go... would be ideal for i18n
    Object.keys( partials ).forEach( function ( key ) {
        App.resetPartial( key, partials[ key ] );
    });
});