JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>999 boktips</title>
        <meta charset="utf-8" />
        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="scripts/app/all_books.js" type="text/javascript"></script>
        <script src="scripts/app/book.js" type="text/javascript"></script>
        <script src="scripts/app/random.js" type="text/javascript"></script>
        <script src="scripts/app/search.js" type="text/javascript"></script>
        <script src="scripts/app/shake.js" type="text/javascript"></script>
        <script src="scripts/app/topic.js" type="text/javascript"></script>
        <script src="scripts/app/topics.js" type="text/javascript"></script>
        <script src="scripts/app/app.js" type="text/javascript"></script>
        <link href="styles/normalize.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />
    </head>
    <body>
        <div data-role="view" id="home-view">
            <header data-role="header">
                <div data-role="navbar">999 boktips</div>
            </header>
            <ul class="home-buttons">
                <li><a href="views/all_books.html" data-role="button" class="all-books"><span>Alla boktips</span></a></li>
                <li><a href="views/topics.html" data-role="button" class="topics"><span>Ämnen</span></a></li>
                <li><a href="views/search.html" data-role="button" class="search" data-click="onSearchClick"><span>Sök</span></a></li>
                <li><a href="views/random.html" data-role="button" class="random"><span>Slumpa boktips</span></a></li>
            </ul>
            <footer data-role="footer">
            	<div data-role="navbar"><span class="shake-info">Skaka på enheten för att slumpa fram ett boktips.</span></div>
            </footer>
       ...

JavaScript

document.addEventListener('deviceready', function () {
    window.app = new kendo.mobile.Application(document.body, {
    	initial: '#home-view',
    	loading: '<h1>Laddar...</h1>',
    	platform: 'ios7'
	});
    StatusBar.overlaysWebView(false)
    StatusBar.backgroundColorByHexString('#bb0000');
    StatusBar.styleLightContent();
    defaultConfiguration();
    var shake = new Shake({
    	frequency: 300,                                                //milliseconds between polls for accelerometer data.
    	waitBetweenShakes: 1000,                                       //milliseconds to wait before watching for more shake events.
    	threshold: 16,                                                 //how hard the shake has to be to register.
    	success: onShake, //callback when shake is detected. "this" will be the "shake" object.
    	failure: function() {}                                        //callback when watching/getting acceleration fails. "this" will be the "shake" object.
	});
	shake.startWatch();
}, false);

function onShake() {
    if(Random.view && Random.view == app.view()) {
        Random.onRefreshClick();
    }
    else {
        app.navigate('views/random.html');
    }
}

function onSearchClick(e) {
    if(Search.initialized) {
        Search.field.val('');
        Search.clear();
    }
}

function onBannerTap(e) {
    window.open('http://www.example.com/', '_system');
}

function defaultConfiguration() {
    window.globalData = [];
    window.globalData['topicId'] = 0;
    window.globalData['reloadTopic'] = true;
    window.globalData['bookId'] = 0;
    window.globalData['lastQuery'] = null;
}

function dailyToken() {
    var d = new Date();
    var token = d.getFullYear().toString() + (d.getMonth() < 10 ? '0' : '') + d.getMonth().toString() + (d.getDate() < 10 ? '0' : '') + d.getDate().toString();
    return token;
}


var showAlert = function(message, title, callback) {
    navigator.notification.alert(message, callback || function () {},...