JSFiddle - React, Tailwind, and code Playground

by pichowskii

HTML

<section>
        <form name="Calc">
            <table>
                <thead>
                    <tr>
                        <th colspan="4">
                            <input type="text" name="Input" placeholder="0">
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="button" name="one" value="1" onclick="Calc.Input.value += '1'">
                        </td>
                        <td>
                            <input type="button" name="two" value="2" onclick="Calc.Input.value += '2'">
                        </td>
                        <td>
                            <input type="button" name="three" value="3" onclick="Calc.Input.value += '3'">
                        </td>
                        <td>
                            <input type="button" name="plus" value="+" onclick="Calc.Input.value += '+'">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" name="four" value="4" onclick="Calc.Input.value += '4'">
                        </td>
                        <td>
                            <input type="button" name="five" value="5" onclick="Calc.Input.value += '5'">
                        </td>
                        <td>
                            <input type="button" name="six" value="6" onclick="Calc.Input.value += '6'">
                        </td>
                        <td>
                            <input type="button" name="minus" value="-" onclick="Calc.Input.value += '-'">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" name="seven" value="7" onclick="Calc.Input.value += '7'">
                        </td>
                        <td>
                           ...

CSS

body {
    font-family: Tahoma;
    text-align: center;
}

    body table, th, tr, td {
        border: solid;
        border-width: 1px;
    }

        body table td, th {
            height: 100px;
            width: 100px;
        }
    
        body table input {
            width: 95px;
            height: 95px;
            font-size: 50px;
        }

        table thead tr th input {
            width: 410px;
            height: 95px;
            text-align: right;
            font-size: 50px;
        }