JSFiddle - React, Tailwind, and code Playground

by grammar

HTML

<div class=body>
    <div class="header">
        <a href=#>Leaderboards</a>
        <a href=#>Server stats</a>
        <a href=# class=active>Search</a>
    </div>
    <h1 class=title>Roleplay<span>Stats</span></h1>
    <div>
        <form class="search" id="search" method="get" action="html/player.html">
            <input type="text" placeholder="What is your SteamID?" id="searchbar" name="id" maxlength="17">
            <input type="submit" value="Search">
        </form>
    </div>
</div>

CSS

* {
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
}

a {
    text-decoration: none;
}

div.header {
    width: 100%;
    background-color: rgb(35, 56, 89);
    height: 59px
}

div.header a {
    text-decoration: none;
    text-transform: capitalize;
    color: white;
    padding: 20px;
    float: right;
    transition: 0.2s;
}

div.header a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: deepskyblue;
}

div.header a.active {
    color: deepskyblue;
}

body {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGklEQVQYV2NkwAIYCQkaMzAwnAUpIqgSbhIAMXABBoGmkP0AAAAASUVORK5CYII=);
    background-color: rgba(44, 105, 140, 0.1);
    background-position: center center;
}

h1.title {
    color: rgb(35, 56, 89);
    text-transform: lowercase;
    font-size: 5em;
    text-align: center;
    padding: 140px;
    text-shadow: 0px 0px 21px rgba(0, 0, 0, 0.3);
}

h1.title span {
    color: deepskyblue;
    text-transform: uppercase;
}

form.search {
    background-color: rgb(35, 56, 89);
    width: 80%;
    margin: 30px auto;
    height: 100px;
    border-radius: 10px;
}

input:focus { outline: none; }

form.search input[type=text] {
    background-color: rgb(35, 56, 89);
    border: 0px;
    color: white;
    line-height: 96px;
    font-size: 2em;
    width: 450px;
    margin-left: 15px;
    transition: background 2s ease-out, border 2s ease-out;
}

form.search input[type=text]::placeholder {
    color: deepskyblue;
}

form.search input[type=submit] {
    border: 0;
    border-radius: 0px;
    margin: 0px;
    float: right;
    height: 100%;
    width: 150px;
    background-color: deepskyblue;
    color: white;
    font-size: 1.5em;
    text-transform: uppercase;
    transition: 0.4s;
    border-left: 4px white solid;
}

form.search input[type=submit]:hover {
    background-color: white;
    color: deepskyblue;
}

div.result {
    width: 80%;
    padding: 20px;
    height: 80px;
    margin: 10px auto;
   ...

JavaScript

const form = document.getElementById('search');
const searchBar = document.getElementById('searchbar');
form.addEventListener('submit', function(e) {
  e.preventDefault();
  const val = searchbar.value;
  console.log(val);
  if (val.match(/[765611][0-9]{11}$/)) {
  	// window.location.href = 'thecopperkings.co.uk'+b;
    alert('success!');
  } else {
    searchBar.classList.add('has-error');
    
  }
  /*if (document.getElementByID('searchbar').value = "765611[0-9]{11}$") {
    var b = document.getElementById('searchbar').value;
    window.location.href = 'thecopperkings.co.uk'+b;
  } else {
	  a.classList.add('has-error');
  }*/
});