style registration pages

assets/css/components.scss

@@ -1,5 +1,41 @@
 @layer components {
   .input {
-    @apply rounded-lg px-4 py-2;
+    @apply rounded-lg px-4 py-2 border;
+    @apply shadow-sm focus:shadow-lg;
+    @apply transition-all duration-300 ease-in-out;
+  }
+  
+  .input-primary {
+    @apply border-primary-500 hover:border-primary-600 active:border-primary-600;
+    @apply text-black;
+  }
+  
+  .checkbox {
+    -ms-transform: scale(1.5);
+    -moz-transform: scale(1.5);
+    -webkit-transform: scale(1.5);
+    -o-transform: scale(1.5);
+    transform: scale(1.5);
+    padding: 10px;
+  }
+  
+  .title {
+    @apply leading-5 tracking-wide;
+  }
+  
+  .btn {
+    @apply focus:outline-none px-4 py-2 rounded-lg;
+    @apply shadow-sm focus:shadow-lg;
+    @apply transition-all duration-300 ease-in-out;
+  }
+  
+  .btn-primary {
+    @apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
+    @apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
+    @apply text-white;
+  }
+  
+  .hr {
+    @apply border border-primary-500 w-full max-w-2xl;
   }
 }

assets/tailwind.config.js

@@ -25,7 +25,10 @@ module.exports = {
     extend: {},
   },
   variants: {
-    extend: {},
+    extend: {
+      backgroundColor: ['active'],
+      borderColor: ['active'],
+    },
   },
   plugins: [],
 }