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>
<section id="pricing" class="bg-white">
<div class="container">
<h2 class="text-center">PRICING</h2>
<div class="spacer spacer-line border-primary"> </div>
<div class="spacer"> </div>
<div class="row">
<div class="col-md-4">
<div class="pricing-table">
<div class="pricing-table-title">
<h5 class="pricing-title bg-info-hover text-white">STARTER</h5>
</div>
<div class="pricing-table-price text-center bg-info">
<p class="title-font">
<span class="pricing-period text-white mr-1">From</span>
<span class="pricing-currency text-white">$</span>
<span class="pricing-price text-white">9.99</span>
<span class="pricing-period text-white">/ Mo.</span>
</p>
</div>
<div class="pricing-table-content">
<ul>
<li><strong>Basic Package</strong></li>
<li><strong>1 Intermediate</strong></li>
<li><strong>Business Start</strong></li>
<li><strong><del>Professional Features</del></strong></li>
<li><strong><del>Extra Options</del></strong></li>
<li><strong>24/7 Support</strong></li>
</ul>
<div class="pricing-table-button">
<a href="#x" class="btn btn-info"><span>Request Quote</span></a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="pricing-table bg-lightgrey">
<div class="pricing-table-title">
<h5 class="pricing-title bg-primary-hover text-white">BUSINESS</h5>
</div>
<div class="pricing-table-price text-center bg-primary">
<p class="title-font">
<span class="pricing-period text-white mr-1">From</span>
<span class="pricing-currency text-white">$</span>
<span class="pricing-price text-white">29.99</span>
<span class="pricing-period text-white">/ Mo.</span>
</p>
</div>
<div class="pricing-table-content">
<ul>
<li><strong>Management Package</strong></li>
<li><strong>1 Professional</strong></li>
<li><strong>Business Professional</strong></li>
<li><strong>Professional Features</strong></li>
<li><strong><del>Extra Options</del></strong></li>
<li><strong>24/7 Support</strong></li>
</ul>
<div class="pricing-table-button">
<a href="#x" class="btn btn-primary"><span>Request Quote</span></a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="pricing-table">
<div class="pricing-table-title">
<h5 class="pricing-title bg-info-hover text-white">ENTERPRISE</h5>
</div>
<div class="pricing-table-price text-center bg-info">
<p class="title-font">
<span class="pricing-period text-white mr-1">From</span>
<span class="pricing-currency text-white">$</span>
<span class="pricing-price text-white">49.99</span>
<span class="pricing-period text-white">/ Mo.</span>
</p>
</div>
<div class="pricing-table-content">
<ul>
<li><strong>Business Package</strong></li>
<li><strong>Up to 4 Professionals</strong></li>
<li><strong>Enterprise Professional</strong></li>
<li><strong>Professional Features</strong></li>
<li><strong>Extra Options</strong></li>
<li><strong>24/7 Support</strong></li>
</ul>
<div class="pricing-table-button">
<a href="#x" class="btn btn-info"><span>Request Quote</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background-color: #f7f7f7;
margin-top:20px;}
/* pricing tables */
.pricing-table {
background: #e9f0f4;
text-align: center;
margin: 15px 0;
}
.pricing-table ul, .pricing-table ol {
margin-bottom: 0;
padding-left: 0;
}
.pricing-title {
font-size: 1.5rem;
font-weight: 700;
padding: 30px;
margin-bottom: 0;
}
.pricing-table-price {
background: #cdd4d8;
font-weight: 700;
padding: 30px;
margin-bottom: 30px;
}
.pricing-table-price.w-rounded-price {
display: table;
width: 150px;
height: 150px;
border-radius: 50%;
margin: 0 auto 30px auto;
padding: 0;
}
.rounded-price {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.rounded-price .pricing-price {
font-size: 1.75rem;
}
.rounded-price .pricing-currency {
vertical-align: 10px;
}
.pricing-table-price p {
color: #000;
margin-bottom: 0;
}
.pricing-currency {
font-size: 1rem;
font-weight: 700;
vertical-align: 25px;
}
.pricing-price {
font-size: 3rem;
font-weight: 700;
}
.pricing-period {
font-weight: 700;
}
.pricing-table-content li {
margin-bottom: 15px;
}
.pricing-table-button {
padding: 15px 0 35px;
}
.featured.pricing-table {
background: #9c64b8;
}
.featured.pricing-table .pricing-title {
color: #fff;
}
.featured.pricing-table .pricing-table-content ul li {
color: #eee;
}
.featured.pricing-table .pricing-table-price {
background: #8853a1;
}
.featured.pricing-table .pricing-table-price p {
color: #fff;
}
ul {
list-style: none;
padding: 0;
}
.bg-info-hover {
background-color: #1397af !important;
}
.bg-info {
background-color: #21b9d5 !important;
}
.bg-primary-hover {
background-color: #8853a1 !important;
}
.bg-primary {
background-color: #9c64b8 !important;
}
.text-white {
color: #fff !important;
}
