init commit

package.json

@@ -9,6 +9,7 @@
     "react": "^16.13.0",
     "react-bootstrap": "^1.0.0-beta.17",
     "react-dom": "^16.13.0",
+    "react-icons": "^3.9.0",
     "react-scripts": "3.4.0",
     "styled-components": "^5.0.1"
   },

src/App.js

@@ -1,7 +1,8 @@
 import React from "react";
+import Favourites_card from "./components/Favourites_card";
 
 function App() {
-	return <div className="App">App</div>;
+  return <div className="App">{<Favourites_card />}</div>;
 }
 
 export default App;

src/components/Favourites_card.js

@@ -0,0 +1,52 @@
+import React, { Component } from "react";
+import styled from "styled-components";
+import {
+  Container,
+  Row,
+  Col,
+  ButtonToolbar,
+  Button,
+  Image
+} from "react-bootstrap";
+import { FaHome } from "react-icons/fa";
+
+const Styles = styled.div`
+  .logo {
+    align: left;
+    height: 64px;
+    width: 64px;
+  }
+  ,
+  .container {
+    padding: 4em;
+    background: papayawhip;
+    height: auto;
+    width: 200px;
+  }
+  .title {
+  }
+`;
+const props = {
+  icon: "FaHome",
+  header: "CPF HOUSING Usage",
+  description: "Description hello mother fucker"
+};
+const Favourites_card = () => {
+  return (
+    <Container>
+      <Styles>
+        <Row>
+          <FaHome className="logo" />
+        </Row>
+        <Row>
+          <h1>{props.header}</h1>
+        </Row>
+        <Row>
+          <p>{props.description}</p>
+        </Row>
+      </Styles>
+    </Container>
+  );
+};
+
+export default Favourites_card;