Add style for tags

client/src/pages/StyleGuidePage.vue

@@ -403,6 +403,13 @@ function log(data: any) {
       </button>
     </div>
 
+    <h2 class="mb-8 mt-8">Tags</h2>
+
+    <div class="mb-16 flex flex-col flex-wrap content-center gap-4 lg:flex-row">
+      <button class="tag-active">Active</button>
+      <button class="tag-inactive">Inactive</button>
+    </div>
+
     <h2 class="mb-8 mt-8">Dropdown (Work-in-progress)</h2>
 
     <ItDropdownSelect

client/tailwind.css

@@ -117,8 +117,7 @@ textarea {
   }
 
   .filter-blue-900 {
-    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%)
-      contrast(105%);
+    filter: invert(9%) sepia(38%) saturate(5684%) hue-rotate(200deg) brightness(95%) contrast(105%);
   }
 }
 
@@ -167,6 +166,14 @@ textarea {
     top: 1rem;
     transform: translateY(-50%);
   }
+
+  .tag-inactive {
+    @apply rounded-full border-2 border-blue-900 px-4 py-2 text-blue-900 font-semibold;
+  }
+
+  .tag-active {
+    @apply rounded-full bg-blue-900 px-4 py-2 font-semibold text-white;
+  }
 }
 
 @layer utilities {
@@ -181,7 +188,9 @@ textarea {
   }
 
   .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
   }
 }