JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>

  <head>
    <title>vChat - Login Page</title>
    <meta name="description" content="SAT Project">
    <meta property="og:title" content="vChat - Official Website">
    <meta property="og:site_name" content="vChat">
    <meta property="og:description" content="SAT Project">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="https://unpkg.com/localbase/dist/localbase.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.js"></script>
  </head>

  <body>

    <div class="logo2">
      <a href="./index.html">
        <img src="./assets/images/vchatLogo.png" style="position:absolute; top: 5%; left: 3%;" width="10.3%" alt="vChatLogo">
      </a>
    </div>


    <form id="form" class="loginContainer" method="GET" action="./profilePage.html">

      <div class="headerBarLogin">
        <b>login<b>
      </div>

      <div class="loginBarFonts" style="top: 13%;">
        <i>username<i>
      </div>

      <!--Begining on the Username Input Field-->
      <input class="loginBar" type="text" id="uid" placeholder=". . ." required style="margin-top: 16%;">

      <!--Begining on the Password Input Field-->
      <div class="loginBarFonts" style="top: 4%;">
        <i>password<i>
      </div>
      <input class="loginBar" type="password" autocomplete="on" placeholder=". . ." id="pwd" name="password" required style="margin-top: 5%;">
      </input>


      <script>
        function loginValidator() {
          const submitButton = document.getElementById("form");
          const username = document.getElementById('uid')
          const password = document.getElementById('pwd')

          const db = new Localbase("vChatDataBase")


          submitButton.addEventListener('submit', function (e) {

            console.log(`Inputed field uid: ${username.value}`)
           ...

CSS

@font-face {
	src: url(../assets/fonts/ArkibalDisplayBold.ttf);
	font-family: ArkiBold;
}

@font-face {
	src: url(../assets/fonts/ArkibalDisplayRegular.ttf);
	font-family: ArkiReg;
}

@font-face {
	src: url(../assets/fonts/ArkibalDisplayThin.ttf);
	font-family: ArkiThin;
}


html, body {
	background-image: url(../assets/images/backDrop.png);
	background-color: #2c2f33;
	font-family: "ArkiReg";
	margin: 0;

	width: 100vw;
	height: 100vh;
	overflow-x: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.container {
	text-align: center;
}

.accessButtonsText {
	font-size: 27pt;
	font-family: ArkiBold;
	color: white;
}

.accessButtons {
	border-style: bold;
	border: 5px solid white;
	font-size: 27pt;
	font-family: ArkiBold;
}


.items {
	display: -webkit-box;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-ms-flex-preferred-size: 100px;
	    flex-basis: 100px;
	margin: 10px 0px 0px 10px;
}

.subtitle {
	font-size: 40px;
}

.header {
	font-family: ArkiBold;
	font-size: 50px;
	color: white;
}

.subtitle {
	color: #cfcfcf;
	font-size: 12px;
}

.indexSubtext {
	color: white;
	font-size: 20px;
	font-family: ArkiThin;
	margin-left: 75px;
	margin-right: 75px;
}

.subtext {
	color: white;
	font-size: 20px;
	font-family: ArkiThin;
}

.container {

	padding: 50px 0px 0px 50px;
	text-align: center;

}

@media(min-width: 1250px) {

	.logo img {
		
		width: 500px; 
	}

	.items {
		padding: 50px 0px 0px 50px;
		text-align: center;
	}
}


.loginContainer {
	height: 59%;
	width: 30%;
	background-color: white;  
}

.signUpContainer {
	height: 80%;
	width: 30%;
	background-color: white;  
}

.accountProfileContainer {
	margin-top: 5%;
	height: 70%;
	width: 30%;
	background-color: white;  
}


.profileAccountHeader { 
	padding-top: -20px;
	width: 96%;
	height:...