JSFiddle - React, Tailwind, and code Playground

by Jesse Webb

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<table class="keypad">
	<tr class="key-row">
		<td class="key-cell">
			<button class="btn btn-default key" type="button" disabled>Num<br/>Lock</button>
		</td>
		<td class="key-cell">
			<button class="btn btn-default key" type="button">/</button>
		</td>
		<td class="key-cell">
			<button class="btn btn-default key" type="button">*</button>
		</td>
		<td class="key-cell">
			<button class="btn btn-default key" type="button">-</button>
		</td>
	</tr>
	<tr class="key-row">
		<td class="key-cell">
			<button class="btn btn-default key" type="button">7<br/><span class="key-alt-fn">Home</span></button>
		</td>
		<td class="key-cell">
			<button class="btn btn-default key" type="button">8<br/><span class="glyphicon glyphicon-arrow-up key-alt-fn"></span></button>
		</td>
		<td class="key-cell">
			<button class="btn btn-default key" type="button">9<br/><span class="key-alt-fn">Pg Up</span></button>
		</td>
		<td class="key-cell" rowspan="2">
			<button class="btn btn-default key tall-key" type="button">+</button>
		</td>
	</tr>
	<tr class="key-row">
		<td class="key-cell">
			<button class="btn btn-default key" type="button">4<br/><span class="glyphicon glyphicon-arrow-left key-alt-fn"></span></button>
		</td>
		<td class="key-cell">
			<button class="btn btn-default key" type="button">5</button>
		</td>
		<td class="key-cell">
			<button class="btn btn-default key" type="button">6<br/><span class="glyphicon glyphicon-arrow-right key-alt-fn"></span></button>
		</td>
	</tr>
	<tr class="key-row">
		<td class="key-cell">
			<button class="btn btn-default key" type="button">1<br/><span class="key-alt-fn">End</span></button>
		</td>
		<td class="key-cell">
			<button class="btn btn-default key" type="button">2<br/><span class="glyphicon glyphicon-arrow-down key-alt-fn"></span></button>
		</td>
		<td class="key-cell">
			<button class="btn btn-default key"...

CSS

.keypad {
    margin: 10px auto;
    padding: 0;
    width: 300px; /* not actually a static size, % in real use */
}

.keypad .key-row {
    width: 100%
}

.keypad .key-row .key-cell {
    padding: 2px;
    width: 25%;
}

.keypad .key-row .key-cell button.key {
    font-size: medium;
    font-weight: bold;
    height: 70px;
    width: 100%;
}

.keypad .key-row .key-cell button.key.tall-key {
    height: 144px;
}

.keypad .key-row .key-cell button.key.wide-key {
}

.keypad .key-row .key-cell button .key-alt-fn {
    font-size: small;
    font-weight: normal;
}