JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="folders" data-bind="foreach: folders">
	    <li data-bind="text: $data,
	               css: { selected: $data == $root.chosenFolderId() },
	               click: $root.goToFolder"></li>
	</ul>
	<br>
	<div class="mails" data-bind="with: chosenFolderData">
	    <p><label>From</label>: <span data-bind="text: name"></span></p>
	</div>

CSS

.selected {background-color:red}

JavaScript

function WebmailViewModel() {
    var self = this;

    self.folders = ['cardio', 'classic', 'mass', 'abs'];
    self.chosenFolderId = ko.observable();
    self.chosenFolderData = ko.observable();
    self.chosenMailData = ko.observable();
    // Behaviours
    self.goToFolder = function(folder) {
        console.log(folder);
        self.chosenFolderId(folder);
        self.chosenMailData(null);
        //apply you ajax call and fill 'chosenFolderData' 
        self.chosenFolderData({"id":"1", "name":"cardio", "image":"aslas", "header":"Kardio", "message":"message\r\n"});  
    };
    self.goToFolder('Inbox');
}

ko.applyBindings(new WebmailViewModel());