pricing plan start

src/App.js

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
 import HomePage from "./components/HomePage";
 import Login from "./components/SignIn";
+import PricingPlan from "./components/PricingPlan";
 import LogInContainer from "./components/LogInContainer";
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 class  App extends Component {
   render(){
     return (
       <div className="App">
+        <PricingPlan />
         <BrowserRouter>
           <Switch>
             <Route exact path="/" Component={HomePage} />

src/components/PricingPlan.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import './pricing-plan.css';
+
+class PricingPlan extends Component {
+
+    render(){
+        return(
+            <div className="body">
+                <section class='pricing-plan'>
+                    <div class='pricing-plan__header'>
+                        <h1 class='pricing-plan__title'>Basic Package</h1>
+                        <h2 class='pricing-plan__summary'>For those getting started</h2>
+
+                    </div>
+                    <div class='pricing-plan__desc'>
+                    </div>
+                </section>
+
+            </div>
+
+        )
+    }
+
+}
+export default PricingPlan;

src/components/pricing-plan.css

@@ -0,0 +1,41 @@
+.pricing-plan {
+
+    width:300px;
+    border-radius: 25px;
+    box-shadow: 0 0 5px rgba(0,0,0,0.2);
+    overflow: hidden;
+    font-family: sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #555555;
+    margin: 15px;
+
+}
+    
+.pricing-plan__header{
+
+    padding:25px;
+    background: #009578;
+    color: #ffffff;
+
+}
+
+.pricing-plan__title,
+.pricing-plan__summary{
+
+    margin: 0;
+    text-align: center;
+}
+
+.pricing-plan__title{
+
+    font-size: 1.5em;
+    font-weight: 400;
+
+}
+
+.pricing-plan__summary {
+
+    font-size: 1em;
+    font-weight:300;
+}