JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

	  
		    <title> 
			
			</title>
	  
			<link rel="stylesheet" href="com309schuhmacher.css">
			
			<script type="text/javascript" src="com309schuhmacher.js"></script>

	  
	  
	  
	  

	  <body>
	   	
		

			<section style="text-align:center">
			
				<h1>
				
				<span class="animate">Display a number raised to the 2nd, 3rd, 4th, and 5th power</span>
				
				</h1>			
					
					<div class="box"><section style="text-align:center">
					
					<div class="display"><input type="number" = "18" id="d"></div>

					<div class="keys">
		
				
	  
					<p>
						
						<section style="text-align:center"></section>
							
							<input type="button" class="button"value="x2" onclick='math("x2")'>
							
							<input type="button" class="button"value="x3" onclick='math("x3")'>
							
							<input type="button" class="button"value="x4" onclick='math("x4")'>
							
							<input type="button" class="button"value="x5" onclick='math("x5")'>
							
					</p>
						
					<p>
						
							<input type="button" class="button"value="c" onclick='c("")'>
							
							<input type="button" class="button"value="=" onclick='e()'>
							
					</p>
						
					</div>
					</div>
			</section>

CSS

body
{
background-color:#595D64;
} 
.box
{
background-color:#000000;
height:350px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
} 

.display
{
background-color:#0000;
width:220px;
position:relative;
left:15px;
top:20px;
height:70px;
}

.display input
{
position:relative;
left:2px;
top:2px;
height:30px;
color:black;
background-color:#FFF5EE;
font-size:21px;
text-align:relative;
}

JavaScript

function c(val)
{
	document.getElementById("d").value = val;
}
function math(val)
{
	document.getElementById("d").value += val;
}
function e()
{ 
	try 
{ 
		c(eval(document.getElementById("d").value)) 
} 
catch(e)
{
  c('Error') 
} 
}