JSFiddle - React, Tailwind, and code Playground

HTML

<label for="">
  tabla:
</label>
<input id='valor' type="text">
<button onclick='tab(document.querySelectorAll("#valor")[0].value)'>Enviar</button>

JavaScript

prime = function(a){
			if(a!=2&&a!=3&&a!=5&&a!=7){
				return a==1||a%2==0||a%3==0||a%5==0||a%7==0?false:true
			}else{
				return true
			}
		}
		par = function(a){
			return a%2?"Impar":"Par"
		}
		tab = function(a){
			document.body.innerHTML = ''
			var P = 0;
			var C = 0;
			var Pa = 0;
			var inPa = 0;
      document.body.innerHTML = ''
			for(var i = 1;i<=a;i++){
			var color = prime(i)?'green':'red'
			document.body.innerHTML += ("<a href='javascript:void(0)'><div style='position:relative;color:white;font-weight:900;display:inline-block;width:100px;height:80px;margin:5px;background:"+color+";' id='res"+i+"' align='center'><div style='margin:auto;margin-top:30px;margin-bottom:30px;width:80px;height:20px;'>"+i+"</div><span style='position:absolute;left:0px;right:0;margin:auto;top:10px;width:80px;height:20px;'>"+par(i)+"</span></div></a>")
			prime(i)?P++:C++
			i%2?inPa++:Pa++
			}
			document.body.innerHTML = "<div style='display:inline-block;border:solid 2px red;padding:5px'>Primos="+P+"<br><br>Compuestos:"+C+"</div> <div style='height:10px;width:10px;background:red;display:inline-block;position:absolute;top:16px;'></div><label style='margin-left:12px;position:absolute;top:13px;'>Compuestos</label><div style='height:10px;width:10px;background:green;display:inline-block'></div><label> Primos</label><br><br>"+document.body.innerHTML
		}