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="" />
        <input class="clear-icon" type="button" value="&#xf057" onclick="" />
    </div>
</div>

CSS

input[type=button] {
    color: #000000;
    font-size: 40px;
    font-weight: bold;
    padding: 15px;
    width: 15%;
    margin-bottom: 5px;
    line-height: 40px;
    vertical-align: middle;
}
input[type=button]:hover {
    cursor:pointer;
}
input.clear-icon {
    font-family: FontAwesome;
    color: #666;
    font-weight: normal;
    font-size: 44px;
}