Adding Current Balance Widget (without functionality)

src/pages/AddNewBill.css

@@ -2,9 +2,10 @@
     max-width: 20%;
     background-color: rgb(223, 245, 229);
     padding: 10px;
+    margin: 1%;
 }
 .widget_header {
-    margin:0px;
+    margin: 0px;
     margin-bottom: 20px;
     position: relative;
 }

src/pages/CurrentBalance.css

@@ -0,0 +1,29 @@
+.current_balance_widget {
+    max-width: 20%;
+    background-color: rgb(223, 245, 229);
+    padding: 10px;
+    margin: 1%;
+}
+.widget_header {
+    margin: 0px;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+img {
+    position: relative;
+    float: left;
+    height: 40px;
+    padding: 5%;
+}
+
+.current_balance_widget h1 {
+    padding-left: 70px;
+    margin: 0;
+}
+.current_balance_widget h6 {
+    color: green;
+    margin: 0;
+    margin-bottom: 10px;
+    padding-left: 70px;
+}

src/pages/CurrentBalance.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './CurrentBalance.css'
+import logo from './widget_logos/current_balance_logo.png';
+
+export default function CurrentBalance() {
+    return (
+        <>
+            <div class="current_balance_widget">
+                <h5 class="widget_header">Current Balance</h5> 
+                <img src={logo} />          
+                <h1>$1238.56</h1>
+                <h6>+ $179.97 (17%) last month</h6>
+            </div>
+        </>
+        
+    )
+}

src/pages/Dashboard.jsx

@@ -1,12 +1,12 @@
  import AddNewBill from './AddNewBill'
+ import CurrentBalance from './CurrentBalance'
  
  export default function Dashboard() {
-
     return (
         <>
             <h1>Dashboard</h1>
+            <CurrentBalance />
             <AddNewBill />
         </>
-        
     )
  }