JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<main></main>
<script id='temp1' type='text/ractive'>
    < h1 > This is Template 1. < /h1>
    {{#show}}
        {{# steps[currentStep] }}
            {{# { stepName: name, options: options } }}
            <h3>{{stepName}}</h3 > {
        {#options: i
        }
    } < p > < label > < input type = 'radio'
    name = '{{selectedOpt[stepName]}}'
    value = '{{this}}' > {
        {
            name
        }
    } < /label>
                </p > {
        {
            /}}
            {{/
        }
    } {
        {
            /}}
    {{/show
        }
    } {
        {#currentStep < stepsQuantity - 1
        }
    } < a href = '#'
    on - click = 'gotoStep: {{currentStep + 1}}' > next step < /a>
    {{/
    }
    } {
        { ^ currentStep < stepsQuantity - 1
        }
    } < a href = '#'
    on - click = 'gotoStep: {{currentStep - 1}}' > previous step < /a>
    {{/
    }
    }
</script>
<script id='temp2' type='text/ractive'>
    < h1 > This is Template 2. < /h1>
</script>
<script id='tempMain' type='text/ractive'>
    {
        {#page === 'temp1'
        }
    } {
        { > temp1
        }
    } {
        {
            / }}
    {{ #page === 'temp2' }}
        {{ >temp2}}
    {{ /
        }
    } < p > selected value: {
        {
            JSON.stringify(selectedOpt)
        }
    } < /p>
    <hr>
    <p><a href='#' on-click='switchTemp'>toggle template</a > < /p>
</script>

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#tempMain',
    data: {
        show: true,
        page: 'temp1',
        currentStep: 0,
        stepsQuantity: 2,
        steps: [{
            name: 'group1',
            options: [{
                name: 'gr1opt1',
                value: '123'
            }, {
                name: 'gr1opt2',
                value: '124'
            }]
        }, {
            name: 'group2',
            options: [{
                name: 'gr2opt1',
                value: '234'
            }, {
                name: 'gr2opt2',
                value: '235'
            }]
        }, {}]
    }
});

ractive.on('gotoStep', function (event, step) {
    // user can't click proximate steps in wizard
    // check if user click on next button
    var currentStep = this.get('currentStep');
    var toStep = step;

    this.set('show', false); //workaround for bug
    this.set('currentStep', toStep);
    this.set('show', true);
});

function switchTemplate(toTemplate) {
    ractive.set('page', toTemplate);
}

ractive.on('switchTemp', function () {
    if (ractive.get('page') === 'temp1') {
        switchTemplate('temp2');
    } else {
        switchTemplate('temp1');
    }
});