Fixed issues with tailwind not extending default styles

17th Website/src/components/inputs/pingableTextBox.vue

@@ -91,7 +91,7 @@ export default {
     <div class="relative">
         <input type="text" v-model="search" @input="onchange" @keydown.down="bumpDown" @keydown.up="bumpUp"
             @keydown.enter="select" @keydown.tab="select" :class="{}"
-            class="bg-gray-light rounded-md text-white"/>
+            class="bg-gray-light rounded-md text-white focus:outline-none p-1 px-2"/>
         <ul id="results" v-show="isOpen">
             <li class="result" v-for="(result, i) in results" :key="i" @click="setResult(result)"
                 :class="{ 'is-active': i === arrowCounter }">
@@ -122,7 +122,7 @@ export default {
 
 .result.is-active,
 .result:hover {
-    background-color: #4AAE9B;
+    background-color: #01bde7;
     color: white;
 }
 </style>

17th Website/src/forms/transferForm.vue

@@ -31,7 +31,7 @@ export default {
     <div class="bg-gray-dark rounded-xl max-w-4xl min-w-formWidth px-5">
         <h1 class="m-0">Unit Transfer</h1>
 
-        <div id="container mx-">
+        <div id="container" class="mx-auto">
             <div class="flex flex-row items-center">
                 <div id="from" class="flex flex-col items-center">
                     <img src="../components/icons/misc/test.png" class="h-40">
@@ -42,11 +42,11 @@ export default {
 
                 <div id="to" class="flex flex-col items-center">
                     <img src="../components/icons/misc/test.png" class="h-40">
-                    <p class="text-white text-3xl font-medium">Company</p>
+                    <Dropdown values="units"></Dropdown>
                 </div>
             </div>
         </div>
 
-        <Dropdown values="units"></Dropdown>
+        
     </div>
 </template>