1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
<div class="container">
<div class="row text-center">
<div class="col-lg-3">
<div class="card plan-card">
<div class="card-block">
<div class="pt-3 pb-3">
<h1><i class="fa fa-plane plan-icon"></i></h1>
<h6 class="text-uppercase text-primary">Starter Pack</h6>
</div>
<div>
<h1 class="plan-price padding-b-15">$19<span class="text-muted m-l-10"><sup>Per Month</sup></span></h1>
<div class="plan-div-border"></div>
</div>
<div class="plan-features pb-3 mt-3 text-muted padding-t-b-30">
<p>Free Live Support</p>
<p>Unlimited User</p>
<p>No Time Tracking</p>
<p>Free Setup</p>
<a href="#/" class="btn btn-primary">Sign Up Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card plan-card">
<div class="card-block">
<div class="pt-3 pb-3">
<h1><i class="fa fa-trophy plan-icon bg-dark"></i></h1>
<h6 class="text-uppercase text-dark">Professional Pack</h6>
</div>
<div>
<h1 class="plan-price padding-b-15">$29<span class="text-muted m-l-10"><sup>Per Month</sup></span></h1>
<div class="plan-div-border"></div>
</div>
<div class="plan-features pb-3 mt-3 text-muted padding-t-b-30">
<p>Free Live Support</p>
<p>Unlimited User</p>
<p>No Time Tracking</p>
<p>Free Setup</p>
<a href="#/" class="btn btn-dark">Sign Up Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card plan-card">
<div class="card-block">
<div class="pt-3 pb-3">
<h1><i class="fa fa-umbrella plan-icon bg-pink"></i></h1>
<h6 class="text-uppercase text-pink">Enterprise Pack</h6>
</div>
<div>
<h1 class="plan-price padding-b-15">$39<span class="text-muted m-l-10"><sup>Per Month</sup></span></h1>
<div class="plan-div-border"></div>
</div>
<div class="plan-features pb-3 mt-3 text-muted padding-t-b-30">
<p>Free Live Support</p>
<p>Unlimited User</p>
<p>No Time Tracking</p>
<p>Free Setup</p>
<a href="#/" class="btn btn-pink">Sign Up Now</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card plan-card">
<div class="card-block">
<div class="pt-3 pb-3">
<h1><i class="fa fa-cube plan-icon bg-teal"></i></h1>
<h6 class="text-uppercase text-teal">Unlimited Pack</h6>
</div>
<div>
<h1 class="plan-price padding-b-15">$49<span class="text-muted m-l-10"><sup>Per Month</sup></span></h1>
<div class="plan-div-border"></div>
</div>
<div class="plan-features pb-3 mt-3 text-muted padding-t-b-30">
<p>Free Live Support</p>
<p>Unlimited User</p>
<p>No Time Tracking</p>
<p>Free Setup</p>
<a href="#/" class="btn btn-teal">Sign Up Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body {
margin-top: 20px;
}
/* ==============
Pricing
===================*/
.plan-card .plan-icon {
display: inline-block;
font-size: 35px;
width: 100px;
height: 100px;
color: #ffffff;
line-height: 76px;
overflow: hidden;
border: 12px solid #ffffff;
border-radius: 50%;
background: #67a8e4;
box-shadow: 0 0 3px #cccccc;
transition: all .3s;
}
.plan-card .plan-price span {
font-size: 15px;
vertical-align: middle;
}
.plan-card .plan-features p {
line-height: 32px;
}
.bg-pink {
background-color: #f06292 !important;
}
.bg-teal {
background-color: #009688 !important;
}
.text-pink {
color: #f06292 !important;
}
.text-teal {
color: #009688 !important;
}
.btn-pink {
background-color: #f06292;
border: 1px solid #f06292;
color: #ffffff;
}
.btn-teal {
background-color: #009688;
border: 1px solid #009688;
color: #ffffff;
}
