Onboarding Form

src/app/globals.css

@@ -1,3 +1,28 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  --pod-cyan: 23 169 188;
+  --pod-orange: 249 146 35;
+  --pod-pink: 255 76 255;
+  --pod-purple: 93 65 122;
+}
+
+@layer components {
+  .input {
+    @apply block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6;
+  }
+  .select {
+    @apply block w-full rounded-md border-0 py-1.5 px-1.5 text-black shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6;
+  }
+  .label {
+    @apply block text-sm font-medium leading-6 text-white;
+  }
+  .formContainer {
+    @apply bg-podPurple w-full md:w-9/12 mx-auto my-10 p-8 rounded-lg;
+  }
+  .formTitle {
+    @apply text-base text-center font-semibold leading-7 text-white;
+  }
+}