JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://h123.ru/js/a.js"></script>
<script src="http://h123.ru/js/microdata-js.js"></script>
<main itemscope itemtype="Calculator">
	<table class="calc" cellspacing="0" cellpadding="0">
		<caption itemprop="name"></caption>
		<tr>
		  <td colspan="5"><p itemprop="output"></p></td>
		</tr>
		<tr>
		  <td><button itemprop="bnt-1">1</button></td>
		  <td><button itemprop="bnt-2">2</button></td>
		  <td><button itemprop="bnt-3">3</button></td>
		  <td><button itemprop="bnt-/">/</button></td>
		  <td><button itemprop="bnt-c" title="Cancel">C</button></td>
		</tr>
		<tr>
		  <td><button itemprop="bnt-4">4</button></td>
		  <td><button itemprop="bnt-5">5</button></td>
		  <td><button itemprop="bnt-6">6</button></td>
		  <td><button itemprop="bnt-*">*</button></td>
		  <td><button itemprop="bnt-u" title="Undo">&larr;</button></td>
		</tr>
		<tr>
		  <td><button itemprop="bnt-7">7</button></td>
		  <td><button itemprop="bnt-8">8</button></td>
		  <td><button itemprop="bnt-9">9</button></td>
		  <td><button itemprop="bnt--">-</button></td>
		  <td rowspan="2"><button itemprop="bnt-=" class="calc-equals">=</button></td>
		</tr>
		<tr>
		  <td colspan="2"><button itemprop="bnt-0" class="calc-0">0</button></td>
		  <td><button itemprop="bnt-.">.</button></td>
		  <td><button itemprop="bnt-+">+</button></td>
		</tr>
	</table>

	<button itemprop="show-model">Show model</button>
</main>

CSS

main { display: block; padding: 20px; }
.calc { width: 270px; border: 3px solid orange; padding: 15px; border-radius: 5px; background-color: whitesmoke; }
.calc caption { margin-bottom: 15px; font-weight: bold; }
.calc td { padding: 2px; }
.calc button { font-family: Georgia; font-size: 15px; font-weight: bold; height: 50px; width: 50px;  }
.calc p { background-color: ghostwhite; height: 80px; font-size: 19px; font-weight: normal; padding: 10px; border: 1px solid silver; border-radius: 2px; margin-bottom: 10px; }
.calc .calc-equals { height: 104px; }
.calc .calc-0 { width: 104px; }

JavaScript

var calculator = {
	history: []
	
	, scopeNode: null
	
	, remember: function() {
		var current = this.scopeNode.properties.output[0].itemValue;
		
		if( this.history[ this.history.length - 1 ] != current ) {
			this.history.push(current);
		}
	}
	
	, events: {
		"bnt-(.) click": function(e, $match, $1) {
			var output
				, needToRemember = true
				, addTo = false
				, number = false
				, last$1 = this.last$1
				, outputProp = this.scopeNode.properties.output[0]
			;
			
			switch($1) {
				case "1":case "2":case "3":case "4":case "5":case "6":case "7":case "8":case "9":case "0":
				case ".":
					number = true;
				case "-":case "+":case "*":case "/":
					output = number ? $1 : (" " + $1 + " ");
					
					if( $1 == "." )output = output + " ";
					
					addTo = !number || last$1 != "=";
				break;
				case "c":
					needToRemember = false;
					this.history = [];
					output = "";
				break;
				case "u":
					needToRemember = false;
					output = this.history.pop() || "";
				break;
				case "=":
					output = outputProp.itemValue.replace(/\s/g, '');
					
					try {
						output = eval(output);
						output = (output + "").replace(/./g, "$& ");
						this.lastEqual = true;
					}
					catch(e) {
						output = void 0;
					}
				break;
			}
			
			if( output != void 0 ) {
				this.last$1 = $1;
				
				if( addTo ) {
					output = outputProp.itemValue + output;
				}			
				if( needToRemember ) {
					this.remember();
				}
				outputProp.itemValue = output;
			}
		}

		, "show-model click": function(e) {
			alert([].map.call(this.scopeNode.properties, function(node) {
				return node.itemProp[0] + " = " + node.itemValue + "\n"
			}))
		}
	}
	
	, init: function(scopeNode) {
		this.scopeNode = scopeNode;
		return {
			"name": "Калькулятор"
		}
	}

	, callEventHandler: function(propNode, type, e) {
		var events = this.events
			, event
			, handler
			, itemPropName = propNode.itemProp[0]
		;

		if( events ) {
			for( event in events )...