files scrollbar layout done

src/assets/tailwind.css

@@ -9,26 +9,51 @@
 @layer base {
   html {
     font-family: 'Roboto', sans-serif, system-ui;
-    color: #1A1A1A;
+    color: #0f172a;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1;
+  }
+}
+
+/* Scrollbar */
+@layer utilities {
+  .scrollbar::-webkit-scrollbar {
+    @apply w-2 h-2
+  }
+
+  .scrollbar::-webkit-scrollbar-track {
+    @apply bg-neutral-300 rounded-full
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-primary rounded-full
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary
   }
 }
 
 /* components */
 /* button */
 .btn {
-@apply inline-block rounded-full text-base font-medium text-center align-middle transition-colors
+@apply inline-block rounded-full text-base font-medium text-center align-middle transition-colors duration-300
 }
 .btn-sm {
 @apply px-5 py-2
 }
 .btn-lg {
-  @apply px-5 py-3
+  @apply px-4 py-2.5
 }
 .btn-c-primary {
-  @apply bg-neutral border border-neutral hover:bg-[#FFFFFF] hover:text-primary hover:border  hover:border-primary active:bg-primary active:text-[#FFFFFF] active:border
+  @apply text-neutral-50 bg-primary border border-primary hover:bg-neutral-50 hover:text-primary hover:border  hover:border-primary active:border active:ring focus:outline-none focus:border-primary focus:ring
 }
 .btn-disable {
-  @apply border border-neutral bg-[#FFFFFF] text-neutral
+  @apply border border-neutral-200 bg-neutral-50 text-neutral-200
+}
+.btn-neutral {
+  @apply text-neutral-700 bg-neutral-100 border border-neutral-500  hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring
 }
 
 /* invalid */
@@ -40,3 +65,8 @@
 .h-screen-main {
   height: calc(100vh - 104px);
 }
+
+/* Navbar */
+nav ul>li {
+  @apply px-2 py-3.5 duration-300 hover:bg-neutral-900 hover:text-neutral-10 active:bg-neutral-900 active:text-neutral-10;
+}