Simpler card tag badges

src/pages/showcase/_components/CardTags.tsx

@@ -8,38 +8,22 @@ export interface CardTagsProps {
 
 export const CardTags = ({ tags }: CardTagsProps) => {
   return (
-    <ul className="pills">
+    <div>
-      {tags.map(({ color, description, label }, index) => {
+      {tags.map(({ color, label }, index) => {
         return (
-          <li
+          <span
+            className="badge"
             key={index}
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              alignContent: "center",
-              gap: "0.3rem",
-              fontSize: "0.6rem",
-              lineHeight: "1rem",
-              cursor: "default",
-              userSelect: "none",
-              padding: "0.2rem",
-              border: "2px solid gray",
-            }}
-            className="pills__item"
-            title={description}
-          >
-            <span>{label.toLowerCase()}</span>
-            <span
             style={{
               backgroundColor: color,
-                width: "0.5rem",
+              marginRight: "0.3rem",
-                height: "0.5rem",
+              userSelect: "none",
-                borderRadius: "50%",
             }}
-            />
+          >
-          </li>
+            {label}
+          </span>
         );
       })}
-    </ul>
+    </div>
   );
 };