JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<input type="radio" id="rdoHide" name="tool" checked="checked" />Hide
<input type="radio" id="rdoInfo" name="tool" checked="checked" />Information
<input type="radio" id="rdoWarning" name="tool" />Warning
<input type="radio" id="rdoError" name="tool" />Error
<input type="radio" id="rdoSuccess" name="tool" />Success

<div style="margin: 2em 0 2em 0" data-bind="text: message.text"></div>

<!--div data-role="infobox" data-type="message.type" data-text="message.text"></div-->
<!--div data-role="infobox" data-bind="source:message" data-type="type" data-text="text"></div-->
<div data-role="infobox" data-source="viewModel" data-type="message.type" data-text="message.text"></div>

CSS

.floatfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    .floatfix {
        display: inline-block;
        min-height: 1px;  /*Required for IE7 */
    }
    /* Hide from IE-mac \*/
    * html .floatfix {height: 1%;}
    .floatfix {display: block;}
    /* End hide from IE-mac */
    
    .k-info-icon
    {
        float:left;
        margin: 0.5em;
    }
    .k-info-text 
    {
        float: left;
    }

JavaScript

; (function ($, undefined) {

        "use strict";

        var kendo = window.kendo,
            ui = kendo.ui,
            Widget = ui.Widget,
            INFO = 'info',
            WARNING = 'warning',
            ERROR = 'error',
            SUCCESS = 'success',
            CHANGE = 'change';

        var InfoBox = Widget.extend({

            init: function (element, options) {
                var that = this;
                options = options || {};
                kendo.ui.Widget.fn.init.call(that, element, options);
                that._dataSource();
                that.refresh();
            },

            options: {
                name: "InfoBox",
                dataSource: null, //and not source (exception to the data-X parsing)
                type: "info", //warning, error, success
                text: 'Default message for an information box',
                infoIcon: 'http://application.travelfast.com/Production/App_Themes/App_Themes/images/icons/info/infoIcon32.gif',          //http://png-5.findicons.com/files/icons/577/refresh_cl/32/security_center.png
                warningIcon: 'http://application.travelfast.com/Production/App_Themes/App_Themes/images/icons/notice/noticeIcon32.gif',   //http://png-1.findicons.com/files/icons/577/refresh_cl/32/security_warning.png
                errorIcon: 'http://application.travelfast.com/Production/App_Themes/App_Themes/images/icons/error/errorIcon32.gif',       //http://png-4.findicons.com/files/icons/577/refresh_cl/32/security_firewall_off.png
                successIcon: 'http://application.travelfast.com/Production/App_Themes/App_Themes/images/icons/success/successIcon32.gif', //http://png-4.findicons.com/files/icons/577/refresh_cl/32/security_firewall_on.png
                autoBind: true
            },

            type: function (value) {
                var that = this;
                if (value) {
                    //check value is a info, warning, error or success 
                   ...