JSFiddle - React, Tailwind, and code Playground

by Feodor

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
    <div class="menu">
        <ul>
            <li><a href="#">Test</a></li>
        </ul>
    </div>
    <div class="content"></div>
</div>

<script>
</script>

CSS

.menu {
    display: inline-block;
    width: 20%;
    text-align: center;
    vertical-align: top;
}

.content {
    display: inline-block;
    width: 79%;
}

.menu ul li {
    cursor: pointer;
    color: #000;
    list-style: none;
    padding: 5px;
}

.menu ul li.active {
    cursor: default;
    color: #CCC;
}

.content div {
    width: 400px;
}

.content img {
    width: 400px;
    height: 200px;
}

.content table {
    width: 400px;
    border: 1px #000 solid;
    text-align: center;
    color: #5e5e5e;
}

.content table tr:first-child {
    color: #000;
    font-weight: 700;
    font-size: 1.1em;
}

.content table tr td {
    border: 1px #000 solid;
}

JavaScript

$( document ).ready(function() {
        var common = new Common();
        common.init('green');
    });

/*
 * Class Common ******************************************************
 */
function Common() {
    this.title = '';
    this.color = '';
}

Common.prototype.init = function(color){
    var menu = new Menu();
    menu.actionInit(color);
}

Common.prototype.actionContentGet = function(self){
    switch(self.color){
        case 'red':
            var model = new Red();
            model.actionLoadContent(self.color, self.title);
            break;
        case 'green':
            var model = new Green();
            model.actionLoadContent(self.color, self.title);
            break;
        case 'yellow':
            var model = new Yellow();
            model.actionLoadContent(self.color, self.title);
            break;
        default:
            throw ('selected unknow color');
    }
    
}

Common.prototype.viewTitle = function (container, color, title) {
    var _container = ( typeof container == 'string' ) ? $(container) : $('.content');
    if( typeof title !== 'string' ) title = '';
    if( typeof color !== 'string' ) color = '#000';
    _container.empty().append($('<h1>'+title+'</h1>').css({'color': color}));
}

/*
 * Class Menu ******************************************************
 */
function Menu() {
    this.menu_items = [
        {
            title: 'Красный',
            color: 'red',
        },
        {
            title: 'Зелёный',
            color: 'green',
        },
        {
            title: 'Жёлтый',
            color: 'yellow',
        }
    ];
    this.menu_item_default = 'red';
}

Menu.prototype = Object.create(Common.prototype);
Menu.prototype.constructor = Menu;

Menu.prototype.actionInit = function(color){
    if(this.helperColorIsAllowed(color)) this.menu_item_default = color;
    this.viewMenu();
}

Menu.prototype.viewMenu = function(container){
    var _container = ( typeof container == 'string' ) ? $(container) :...