JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <input id="t01" type="text" placeholder="Type Something Here..." autofocus/>
  <input id="b01" type="button" value="Submit" />
  <p class="trueOrFalse">Unknown</p>
</div>

CSS

#container {
  display:inline-block;
  position:relative;
  top:5%;
  left:50%;
  transform:translate(-50%,0);
}

input {
  box-sizing:border-box;
  width:350px;
  height:50px;
  padding:10px 10px 10px 20px;
  font-size:20px;
  display:block;
  margin-top:7px;
}

input:focus {
  outline-color:yellow;
}

input[type="button"] {
  cursor:pointer;
  background-color:#f1f1f1;
  border:1px solid lightgrey;
}

input[type="button"]:hover {
  border:1px solid grey;
}

input[type="button"]:active {
  border:2px solid grey;
}

input[type="button"]:focus {
  outline:0;
}

.trueOrFalse {
  font-size:70px;
  font-family:arial;
  text-align:center;
  margin-top:20px;
}

.true {
  color:green;
}

.false {
  color:red;
}

JavaScript

var myRegEx = /^[0-9]{6,11}[a-z]{1}$/i;

function checkIt() {
	var myString = document.getElementsByTagName("input")[0].value;

  if(myRegEx.test(myString) == true) {
    document.getElementsByTagName("p")[0].className = "trueOrFalse true";
    document.getElementsByTagName("p")[0].innerHTML = "True";
  }
  else {
    document.getElementsByTagName("p")[0].className = "trueOrFalse false";
    document.getElementsByTagName("p")[0].innerHTML = "False";
  }

}

$("#b01").on("click", function(){ checkIt(); });