JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
        
            <form>
                <input type="text">
                <div class="linha">
                    <button type="button" class="numButton" value="1">1</button>
                    <button type="button" class="numButton" value="2">2</button>
                    <button type="button" class="numButton" value="3">3</button>
                    <button type="button" class="opButton" value="/">/</button>
                </div>
                <div class="linha">
                    <button type="button" class="numButton" value="4">4</button>
                    <button type="button" class="numButton" value="5">5</button>
                    <button type="button" class="numButton" value="6">6</button>
                    <button type="button" class="opButton" value="*">*</button>
                </div>
                <div class="linha">
                    <button type="button" class="numButton" value="7">7</button>
                    <button type="button" class="numButton" value="8">8</button>
                    <button type="button" class="numButton" value="9">9</button>
                    <button type="button" class="opButton" value="-">-</button>
                </div><div class="linha">
                    
                    <button type="button" class="numButton" value="0" id="zeroButton">0</button>
                    <button type="button" class="numButton" value=".">.</button>
                    <button type="button" class="opButton" value="+">+</button>
                </div>
               <div class="linha">
                    
                    <button type="button" id="resultButton" value="=">=</button>
                    
                </div>
                    
                
                
                
            </form>
        
        </div>

CSS

*{
    margin:0; padding:0;
}

html {
    height: 100%;
    
}

body{
    background: #333 url('img/numbers_pattern_detail.jpg') center center no-repeat;
    background-size: cover;
}

#container {
    width: 20%;
    margin: 40px auto;
    padding: 10%;
    background: #333;
    text-align: center;
}

form {width: 100%;}

form input[type="text"]{
    width:100%;
    padding: 0 auto;
    background-color: antiquewhite;
    border-width: 0;
    line-height: 25px;
    
    
}

form .linha {
     
    margin: 5px 0;
    padding:0;
    width:100%;
    text-align: right;
}

button {
    width: 25%;
    border: none;
    margin:0;
    
    
}

#zeroButton {
    width: 50%;
}

#resultButton {
    width: 100%;
}