src/components/Card.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+/**
+ * [*]This is a container which accept children.
+ *
+ * [*] style is a conditional prop, when you pass style, you can cusomize the card:
+ *     style={{ anything: "anything" }}
+ *
+ * [*] A good example will be:
+ * <Card
+        style={{
+          border: "4px",
+          borderStyle: "solid",
+          borderColor: "red",
+          backgroundColor: "yellow",
+          ...
+        }}
+   >
+        <h1> This is a child </h1>
+  </Card> 
+ */
+export interface CardProps {
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+const Card = ({ style, children }: CardProps) => {
+  return (
+    <div className="w-100 height-auto rounded-lg p-6 m-4" style={style}>
+      {children}
+    </div>
+  );
+};
+
+export default Card;