dev tabs system

assets/css/custom.css

@@ -2,6 +2,10 @@
   position: static
 }
 
+.m-1 {
+  margin: 0.25rem
+}
+
 .mt-0 {
   margin-top: 0px
 }
@@ -22,6 +26,30 @@
   margin-top: 0.25rem
 }
 
+.ml-auto {
+  margin-left: auto
+}
+
+.-mb-px {
+  margin-bottom: -1px
+}
+
+.mr-1 {
+  margin-right: 0.25rem
+}
+
+.mt-2 {
+  margin-top: 0.5rem
+}
+
+.-mt-2 {
+  margin-top: -0.5rem
+}
+
+.-mt-4 {
+  margin-top: -1rem
+}
+
 .inline-block {
   display: inline-block
 }
@@ -50,6 +78,14 @@
   width: 9rem
 }
 
+.w-full {
+  width: 100%
+}
+
+.max-w-md {
+  max-width: 28rem
+}
+
 .flex-grow {
   flex-grow: 1
 }
@@ -74,6 +110,12 @@
   gap: 1rem
 }
 
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))
+}
+
 .rounded {
   border-radius: 0.25rem
 }
@@ -86,10 +128,31 @@
   border-radius: 9999px
 }
 
+.rounded-xl {
+  border-radius: 0.75rem
+}
+
+.rounded-lg {
+  border-radius: 0.5rem
+}
+
+.rounded-md {
+  border-radius: 0.375rem
+}
+
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem
+}
+
 .border-2 {
   border-width: 2px
 }
 
+.border {
+  border-width: 1px
+}
+
 .border-b-8 {
   border-bottom-width: 8px
 }
@@ -98,15 +161,72 @@
   border-bottom-width: 2px
 }
 
+.border-b {
+  border-bottom-width: 1px
+}
+
+.border-l {
+  border-left-width: 1px
+}
+
+.border-t {
+  border-top-width: 1px
+}
+
+.border-r {
+  border-right-width: 1px
+}
+
 .border-purple-500 {
   --tw-border-opacity: 1;
   border-color: rgb(168 85 247 / var(--tw-border-opacity))
 }
 
+.border-purple-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 232 255 / var(--tw-border-opacity))
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
+}
+
+.bg-blue-900\/20 {
+  background-color: rgb(30 58 138 / 0.2)
+}
+
+.bg-purple-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(168 85 247 / var(--tw-bg-opacity))
+}
+
+.bg-purple-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(126 34 206 / var(--tw-bg-opacity))
+}
+
+.bg-purple-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(88 28 135 / var(--tw-bg-opacity))
+}
+
 .p-4 {
   padding: 1rem
 }
 
+.p-6 {
+  padding: 1.5rem
+}
+
+.p-1 {
+  padding: 0.25rem
+}
+
+.p-3 {
+  padding: 0.75rem
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem
@@ -117,6 +237,41 @@
   padding-bottom: 0.5rem
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem
+}
+
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem
+}
+
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem
+}
+
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem
+}
+
 .pb-2 {
   padding-bottom: 0.5rem
 }
@@ -125,6 +280,10 @@
   padding-bottom: 0.25rem
 }
 
+.pt-4 {
+  padding-top: 1rem
+}
+
 .text-center {
   text-align: center
 }
@@ -144,6 +303,11 @@
   line-height: 2rem
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem
+}
+
 .font-extrabold {
   font-weight: 800
 }
@@ -152,6 +316,18 @@
   font-weight: 700
 }
 
+.font-semibold {
+  font-weight: 600
+}
+
+.font-medium {
+  font-weight: 500
+}
+
+.leading-5 {
+  line-height: 1.25rem
+}
+
 .text-neutral-900 {
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity))
@@ -162,12 +338,80 @@
   color: rgb(115 115 115 / var(--tw-text-opacity))
 }
 
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity))
+}
+
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity))
+}
+
+.text-blue-100 {
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity))
+}
+
 .\!no-underline {
   -webkit-text-decoration-line: none !important;
           text-decoration-line: none !important
 }
 
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+.ring-white {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))
+}
+
+.ring-opacity-60 {
+  --tw-ring-opacity: 0.6
+}
+
+.ring-offset-2 {
+  --tw-ring-offset-width: 2px
+}
+
+.ring-offset-blue-400 {
+  --tw-ring-offset-color: #60a5fa
+}
+
+.hover\:bg-white\/\[0\.12\]:hover {
+  background-color: rgb(255 255 255 / 0.12)
+}
+
+.hover\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity))
+}
+
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+
 @media (prefers-color-scheme: dark) {
+  .dark\:border-purple-900 {
+    --tw-border-opacity: 1;
+    border-color: rgb(88 28 135 / var(--tw-border-opacity))
+  }
+
   .dark\:text-neutral-400 {
     --tw-text-opacity: 1;
     color: rgb(163 163 163 / var(--tw-text-opacity))
@@ -178,6 +422,11 @@
   .sm\:flex-row {
     flex-direction: row
   }
+
+  .sm\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px
+  }
 }
 
 @media (min-width: 768px) {