2 files changed, 59 insertions, 0 deletions
diff --git a/src/components/Card.css b/src/components/Card.css
new file mode 100644
index 0000000..fddfe22
--- /dev/null
+++ b/src/components/Card.css
@@ -0,0 +1,41 @@
+.cardLink {
+    text-decoration: none;
+    color: black;
+    margin: 12px 24px;
+    flex-basis: 100%;
+    max-width: 200px;
+}
+
+.Card {
+    text-decoration: none;
+    color: #000;
+    border: 2px solid #fbd38d;
+    border-radius: 12px;
+    padding: 0px 40px;
+}
+
+@media screen and (max-width: 600px) {
+    .Card {
+        padding: 0px 16px;
+        margin: 10px 0px;
+    }
+}
+
+.Latest {
+    font-size: 1.8em;
+}
+
+.Card:hover {
+    background-color: #ffc869;
+    color: #fff;
+}
+.Card:hover .Diff {
+    color: #fff;
+}
+
+.animate {
+    -moz-transition: color, background-color 0.3s;
+    -webkit-transition: color, background-color 0.3s;
+    -ms-transition: color, background-color 0.3s;
+    transition: color, background-color 0.3s;
+}
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
new file mode 100644
index 0000000..0535033
--- /dev/null
+++ b/src/components/Card.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./Card.css";
+
+const Card = (props) => {
+    return (
+        <Link className="cardLink" to={props.link}>
+            <div className="Card animate">
+                <p>
+                    <span className="Latest">{props.latest}{props.suffix ?? ""}</span>
+                </p>
+                <h3>{props.name}</h3>
+            </div>
+        </Link>
+    );
+};
+
+export default Card;