JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
            <form id="form">
				<h1 style="text-align:center;font-size:32px;">Character Card</h1>
				<br><br>
				<h3>Skill 1</h3>
                <input type="number" min="0" max="2" value="0" id="input">
                <br><br>
				<h3>Skill 2</h3>
                <input type="number" min="0" max="2" value="0" id="input2">
                <br><br>
				<h3>Skill 3</h3>
                <input type="number" min="0" max="2" value="0" id="input3">
                <br><br>
                <input type="button" onclick="Check()" value="Check value">
                <h2 id="error">You can only allocate 3 points</h2>
        </form>
		</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap');

body {
    background: none !important;
	font-family: 'Spartan', sans-serif;
}
h3 {
	font-size: 18px;
}
#container {
    font-size: 12px;
    padding: 25px;
    color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    height: 450px;
    width: 350px;
    border-radius: 7px;
}

button {
    background-color: aliceblue;
    padding: 12px;
}

JavaScript

function Check() {
        var skill1 = parseInt(document.getElementById("input").value);
        var skill2 = parseInt(document.getElementById("input2").value);
        var skill3 = parseInt(document.getElementById("input3").value);
        var value = skill1 + skill2 + skill3;

        document.getElementById("error").innerHTML = value;
        
        if(value == 0) {
        	document.getElementById("error").innerHTML = 'Choose your character points';
        }
}