JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<div class="progress">
  <div data-bind="style:{width:val}, text:val" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" ">
    50%
  </div>
</div>

<p data-bind="text:val">Hello</p>

<result-view></result-view>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

JavaScript

var MM = {
            userName: ko.observable(""),            
            userPassword: ko.observable(""),
            uiId: ko.observable("login"), //config, training, learning, statistics
            loginOk: ko.observable(0),
            doLogin : function()
            {
              //alert("Erg:" + loginOk());
              MM.loginOk(1);
              MM.uiId('menu');
              //alert("UI:" + MM.uiId() );
            },
            
            doLogout : function()
            {
              MM.loginOk(0);
              MM.uiId('login');          
            },

            selectUi : function( uiname )
            {
              MM.uiId(uiname); 
            },

            imageData:[
              { "id": 1, "patternName": "Homogeneos", "url": "img/1.jpg" },
              { "id": 2, "patternName": "Speckled", "url": "img/2.jpg" },
              { "id": 3, "patternName": "Centromere", "url": "img/3.png" },
              { "id": 4, "patternName": "Multiple Dots", "url": "img/4.png" },
            ],
            currentId:0,
            currentPatternName : ko.observable(""),
            currentUrl : ko.observable(""),
            correctAnswers: ko.observable(0),
            wrongAnswers: ko.observable(0),
            
            learning_nextImage : function( )
            {
                MM.currentId++;
                if (MM.currentId > 3 ){ MM.currentId=0; }
                MM.currentPatternName( "");
                MM.currentUrl(MM.imageData[MM.currentId].url );
            },

            learning_nextCorrectAnswer: function( )
            {
                MM.learning_nextImage();
                MM.correctAnswers(MM.correctAnswers()+1);
            },

            learning_nextWrongAnswer : function( )
            {
                MM.learning_nextImage();
                MM.wrongAnswers(MM.wrongAnswers()+1);
            },

            learning_showPatternName : function( )
            {
                MM.currentPatternName(...