add responsiveness

frontend/src/app/credentials/card/Card.jsx

@@ -0,0 +1,25 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = (props) => {
+  return (
+    <div className={styles.cardContainer}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Name</p>
+          <p>mongo tls ca crt</p>
+        </div>
+        <div className={styles.list}>
+          <p>Organization ID</p>
+          <p>67160a5ae69144ff19aafb86</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/credentials/card/styles.module.css

@@ -0,0 +1,42 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.list p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}