JSFiddle - React, Tailwind, and code Playground

by bobbyrne01

HTML

<input type="text" id="inputbox">
<div id="sci_buttons">
    <button class=s ciButton type="button" id="hyp" onclick="FoxyCalc_Panel.hyp();">hyp</button>
    <button class=s ciButton type="button" id="shift" onclick="FoxyCalc_Panel.shift();">shift</button>
    <hr>
    <br>
    <button class="sciButton" type="button" id="sin" onclick="FoxyCalc_Panel.insert('sin()');">sin</button>
    <button class="hidden" type="button" id="asin" onclick="FoxyCalc_Panel.insert('asin()');">asin</button>
    <button class="hidden" type="button" id="sinh">sinh</button>
    <button class="hidden" type="button" id="asinh">asinh</button>
    <button class="sciButton" type="button" id="cos" onclick="FoxyCalc_Panel.insert('cos()');">cos</button>
    <button class="hidden" type="button" id="acos" onclick="FoxyCalc_Panel.insert('acos()');">acos</button>
    <button class="hidden" type="button" id="cosh">cosh</button>
    <button class="hidden" type="button" id="acosh">acosh</button>
    <button class="sciButton" type="button" id="tan" onclick="FoxyCalc_Panel.insert('tan()');">tan</button>
    <button class="hidden" type="button" id="atan" onclick="FoxyCalc_Panel.insert('atan()');">atan</button>
    <button class="hidden" type="button" id="tanh">tanh</button>
    <button class="hidden" type="button" id="atanh">atanh</button>
    <button class="sciButton" type="button" id="log" onclick="FoxyCalc_Panel.insert('log10()');">log</button>
    <button class="hidden" type="button" id="10powerx" onclick="FoxyCalc_Panel.insert('10^');">10<span class="subscript">x</span>

    </button>
    <button class="sciButton" type="button" id="ln" onclick="FoxyCalc_Panel.insert('log()');">ln</button>
    <button class="hidden" type="button" id="exp" onclick="FoxyCalc_Panel.insert('exp()')">exp</button>
    <button class="sciButton" type="button" id="mod" onclick="FoxyCalc_Panel.insert('%');">mod</button>
    <button class="sciButton" type="button" id="recp" onclick="FoxyCalc_Panel.insert('1/');">1/x</button>
   ...

CSS

button {
    cursor:pointer;
}
#inputbox {
    width:100%;
    height:25px;
    padding-left: 5px;
    padding-right: 5px;
}
#num_buttons, #expression_buttons {
    position:absolute;
    padding-top: 10px;
    font-weight:bold;
}
#sci_buttons {
    padding-top:10px;
}
#num_buttons {
    left:0px;
    padding-left: 5px;
}
#expression_buttons {
    padding-right: 5px;
    right:0px;
}
.numButton, .exprButton {
    width: 40px;
    height: 30px;
    font-size:11px;
}
.sciButton {
    width: 50px;
    height: 30px;
    font-size:11px;
}
#btn0 {
    width: 85px;
}
.subscript {
    font-size:8px;
    vertical-align: baseline;
    position: relative;
    top: -0.8em;
}
#statusbar {
    position:absolute;
    bottom:0px;
    font-size:13px;
    left: 0;
    right: 0;
    padding-left:5px;
    padding-right:5px;
}
.hidden {
    display:none;
}