remove defined css class and just use tailwind

src/components/UI/Sidebar/sidebarButton.tsx

@@ -27,6 +27,6 @@ export const SidebarButton = ({
     {Icon && <Icon size={16} />}
     {element && element}
     <span className="flex flex-1 justify-start shrink-0">{label}</span>
-    {count > 0 && !active && <div className="justify-end notification-count">{count}</div>}
+    {count > 0 && !active && <div className="justify-end text-white rounded-[20%] px-[2%] bg-[rgb(195,0,0)]">{count}</div>}
   </Button>
 );

src/index.css

@@ -122,12 +122,4 @@ img {
 
 .animate-spin-slow {
   animation: spin-slower 2s linear infinite;
-}
-
-.notification-count {
-  color: white;
-  border-radius: 20%;
-  padding-left: 2%;
-  padding-right: 2%;
-  background-color: rgb(195,0,0);
 }