JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Simple Calculator</h1>
	<div class="calc-div">

		<p class="btnClick1" id="top"><input type="text" class="result"> </p>

		<p class="btnClick1"><button value="1" >1</button><button value="2" class="btnClick">2</button><button value="3" class="btnClick">3</button><button value="4" class="btnClick">4</button></p>

		<p class="btnClick1"><button value="5" class="btnClick">5</button><button value="6" class="btnClick">6</button><button value="7" class="btnClick">7</button><button class="action result">cl</button></p>
		
		<p class="btnClick1"><button value="8" class="btnClick">8</button><button value="9" class="btnClick">9</button><button value="0" class="btnClick">0</button><button id="result" class="action result">=</button></p>

		<p class="btnClick1"><button class="action">+</button><button class="action">-</button><button class="action">*</button><button class="action">/</button></p>
		<p class="btnClick1"><button>.</button><button class="del">Backspace</button></p>

	</div>

CSS

.calc-div{max-width:400px;width:100%;margin:0 auto;background:grey;padding:10px;border-radius:8px;}
.calc-div #top> input{display: inline-block;width:90%;margin:4px;padding:7px;}
.calc-div p{display:block;width:100%;}
.calc-div p button{width:23%;padding:10px 6px;background:#2D2D2D;border:1px solid #2D2D2D;margin-right:4px;color:#fff;border-radius:4px;outline:none;}
 h1{text-align:center;}

JavaScript

$(document).ready(function(){
	var crntVal='',crntStore='';
	var c,a;
	var btnVal='';
	var operation=false;
	var method,action='';
	$('.btnClick1 button').click(function() {
		if (!$(this).hasClass("action")) {
			if (!operation) {
				if (!$(this).hasClass("del")) {
					crntStore += $(this).text();
				}
				else {
					crntStore=crntStore.substr(0, crntStore.length - 1);
				}
			}else{
				if (!$(this).hasClass("del")) {
					btnVal += $(this).text();
				}else
        {
        btnVal=btnVal.substr(0, btnVal.length - 1);
        }
			}
		}
		else if (!$(this).hasClass("result")) {
			operation=true;
			action = $(this).text();
		}else{
			if ($(this).text()=='cl') {
				$("input").val("");
				crntStore="";
				btnVal="";
				operation = false;
				action ='';
			}else{
				btnVal = calculate(action);
			}
		}
		display(btnVal);
  });

	function calculate(val)
  {
    	switch (val) {
				case '+': 
					method = parseFloat(crntStore)+ parseFloat(btnVal);
					// console.log(method);
					break;
				case '-':
					method = parseFloat(crntStore)- parseFloat(btnVal);
					break;
				case '*':
					method = parseFloat(crntStore)*parseFloat(btnVal);
					break;
				case '/':
					method = parseFloat(crntStore)/parseFloat(btnVal);
					break;
			}
			return method;
  }

  function display(val){
  	val == '' ? $("input").val(crntStore) : $("input").val(val);
  }
});