JSFiddle - React, Tailwind, and code Playground

HTML

<?php session_start();?>
<!DOCTYPE HTML>

<?php 
//if login detials are not empty
if(isset($_POST['login'])){
	include('includes/dbconx.php');
		
	//assigning username and password to a variable
	$username = mysqli_real_escape_string($con,$_POST['username']);
	$password = mysqli_real_escape_string($con,$_POST['password']);	
	
	//sel_user selects all from the users where the username is the same as the input and password is the same as password
	$sel_user = "SELECT * FROM admin WHERE username = '$username' AND password = '$password'";
	
	//run_user connects to database using connection string then does the above query
	$run_user = mysqli_query($con, $sel_user);
	
	//check_user then goes through all rows in the database and checks for the above query	
	$check_user = mysqli_num_rows($run_user);
	
	//if the above is more than 0 (meaning any value) and the above criteria is met then assign $username to a session called username
	if($check_user > 0) {
		$_SESSION ['username'] = $username;
	}	
	
	//if not, ask user to try again and direct them to admin-log.php... where the session is destroyed 
	else {
		$_SESSION["errorMsg"] = "Wrong username or password, please try again.";
		mysqli_close($con);
		header('location:admin-log.php');}
		
}
	
?>


<body>
<div id="banner">
<img class="logo" src="images/logo.png" alt="logo">
<div class="stirling">Stirling</div>
<a class="topNav" href="search.php">Search</a>
<a class="topNav" href="contact.php">Contact</a>
<a class="topNav" href="about.php">About</a>
<a class="topNav" href="index.php">Home</a>
</div> <!--end of banner div-->

<div id="container">
<div id="left-panel">
<h1>Admin</h1>

<form>
<table id="admin">
 <tr>
    <td>
      <button type="button" name="viewRecords" id="viewRecords" class="activeButton" onClick="window.location.href='admin.php'" >View Records</button>
    </td>
  </tr>
   <tr>
   	 <td>
      <button type="button" name="createRecord" id="createRecord"...

CSS

@charset "utf-8";
/* CSS Document */

body
{
	margin: 0px auto;
	font-family: Verdana, Geneva, sans-serif;
	background-color: #FFF;
	
}

#banner {
    margin: 0px auto;
    width: 100%;
    height: 130px;
    background-color: #E8FCFF;
    border-bottom: 2px solid #7A7A7A;
    box-shadow: 0px 7px 7px #999;
}

#container {
    margin-bottom: 50px;
    width: 100%;
}

#content
{
	width: 90%;
	text-align: center;
	position: relative;
	margin: 10px auto;
	
}

#footer {
    width: 100%;
    bottom:0;
    left:0;
    text-align: center;
    clear:both;
}
hr
/*single direction drop shadow*/
 {
    height: 10px;
    border-top: 1;
    border-bottom: 0;
    box-shadow: inset 0 11px 11px -11px rgba(0, 0, 0, 0.5);
    position: relative;
}
.logo {
    margin-top: 5px;
    margin-left: 20px;
    width: 190px;
    height: 105px;
    float: left;
    display: block;
}
.stirling {
    font-size:20px;
    color: #999;
    font-weight:bold;
    float: left;
    position:relative;
    margin-top: 80px;
    text-decoration: none;
}
.bottomNav {
    font-size: 22px;
    color: #999;
    font-weight:bold;
    text-decoration: none;
}
.bottomNav:hover {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    text-decoration: none;
}
.bottomNav1 {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    text-decoration: none;
}
.bottomNavActive {
    font-size:22px;
    color: #DD7B7B;
    font-weight:bold;
    text-decoration: none;
}
.bottomNavActive:hover {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    text-decoration: none;
}
.active {
    font-size:22px;
    color: #DD7B7B;
    font-weight:bold;
    float: right;
    margin: 30px;
    text-decoration: none;
}
.active:hover {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    float: right;
    margin: 30px;
    text-decoration: none;
}
.topNav:hover {
    font-size:22px;
    color: #606060;
    font-weight:bold;
    float: right;
    margin: 30px;
    text-decoration:...