JSFiddle - React, Tailwind, and code Playground

by Darko

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div style="width: 755px; margin: 0 auto; ">
    <div class="button-pad">
        <input type="button" value="1" onclick="" />
        <input type="button" value="2" onclick="" />
        <input type="button" value="3" onclick="" />
    </div>
    <div class="button-pad">
        <input type="button" value="4" onclick="" />
        <input type="button" value="5" onclick="" />
        <input type="button" value="6" onclick="" />
    </div>
    <div class="button-pad">
        <input type="button" value="7" onclick="" />
        <input type="button" value="8" onclick="" />
        <input type="button" value="9" onclick="" />
    </div>
    <div class="button-pad">
        <input type="button" value="" />
        <input type="button" value="0" onclick="" />
        <button value="" onclick="" /><i class=" icon-remove"></i></button>
    </div>
</div>

CSS

.button-pad > input {
    color: #000000;
    font-size: 40px;
    font-weight: bold;
    padding: 15px;
    width: 15%;
}
.button-pad > button {
    color: #666;
    font-size: 40px;
    padding: 15px;
    width: 15%;
}
.button-pad > button:hover {
    color: #F00;
    font-size: 40px;
    padding: 15px;
    width: 15%;
}