Fix tag issue

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/category/card.vue

@@ -33,16 +33,17 @@ const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
 
 <template>
   <div
-    class="text-[#F1F2F4]  px-5 py-3 rounded hover:underline randbgcolor hover:scale-[1.05] transition-all duration-500"
+    class="text-[#F1F2F4]  px-5 py-3 rounded hover:underline
+    rand-bg-color hover:scale-[1.05] transition-all duration-500"
   >
-    <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-xl font-extrabold">
+    <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
       <h1>#{{ title }}</h1>
     </NuxtLink>
   </div>
 </template>
 
 <style scoped>
-.randbgcolor {
+.rand-bg-color {
   background-color: v-bind(picAColor);
 }
 </style>

components/category/topic.vue

@@ -17,8 +17,8 @@ const category = computed(() => {
 
 <template>
   <div class="container mx-auto">
-    <div class="p-6 my-4 mx-3 rounded-md bg-gray-200">
-      <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5">
+    <div class="p-6 my-4 mx-3 rounded-md bg-gray-200 dark:bg-gray-800">
+      <h1 class="text-black dark:text-white font-semibold leading-tight text-xl md:text-2xl">
         #{{ category }}
       </h1>
     </div>