Added Cards style

Author: Peter Brendel

frontend/src/components/card/Card.css

@@ -0,0 +1,18 @@
+.Flex-card {
+    margin-left:1.25%;
+    margin-right:1.25%;
+    flex: 1;
+    min-width: 40%;
+    max-width: 500px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.Flex-card p {
+    color: orange;
+    flex: 1;
+}
+
+.Tag {
+    margin-right: 5px;
+}

frontend/src/components/card/Card.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+import Badge from 'react-bootstrap/Badge';
+import './Card.css';
+
+export default (props) => {
+
+    const renderTag = (tag, i) => {
+        return (
+            <Badge
+            className="Tag"
+            pill
+            variant={tag.variant}
+            index={i}>
+                {tag.text}
+            </Badge>
+        );
+    };
+
+    return (
+    <>
+        <Card className="Flex-card" bg="light">
+            <Card.Body>
+                <Card.Title>{props.repository}</Card.Title>
+                <Card.Subtitle className="mb-2 text-muted">{props.author}</Card.Subtitle>
+                <Card.Text className="Content">
+                    {props.readme}
+                </Card.Text>
+                <div>
+                    {props.tags.map((tag, i) => renderTag(tag, i))}
+                </div>
+            </Card.Body>
+        </Card>
+    </>
+    );
+}