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",
+              backgroundColor: color,
-              alignItems: "center",
+              marginRight: "0.3rem",
-              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>
+            {label}
-            <span
+          </span>
-              style={{
-                backgroundColor: color,
-                width: "0.5rem",
-                height: "0.5rem",
-                borderRadius: "50%",
-              }}
-            />
-          </li>
         );
       })}
-    </ul>
+    </div>
   );
 };