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://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/css/materialdesignicons.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-12">
<h2 class="font-weight-light">Our Pricing</h2>
<p class="text-muted mt-4 title-subtitle mx-auto">It is a long established fact that a reader will be of a page when established fact looking at its layout.</p>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-4">
<div class="bg-white mt-3 price-box">
<div class="pricing-name text-center">
<h4 class="mb-0">Deluxe</h4>
</div>
<div class="plan-price text-center mt-4">
<h1 class="text-custom font-weight-normal mb-0">$9<span>/Month</span></h1>
</div>
<div class="price-features mt-5">
<p><i class="mdi mdi-check"></i> Bandwidth: <span class="font-weight-bold">1GB</span></p>
<p><i class="mdi mdi-check"></i> Onlinespace: <span class="font-weight-bold">500MB</span></p>
<p><i class="mdi mdi-close"></i> Support: <span class="font-weight-bold">No</span></p>
<p><i class="mdi mdi-check"></i> Domain: <span class="font-weight-bold">1</span></p>
<p><i class="mdi mdi-check"></i> Hidden Fees: <span class="font-weight-bold">No</span></p>
</div>
<div class="text-center mt-5">
<a href="#/" class="btn btn-custom">Join Now</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="bg-white mt-3 price-box">
<div class="pricing-name text-center">
<h4 class="mb-0">Economy</h4>
</div>
<div class="plan-price text-center mt-4">
<h1 class="text-custom font-weight-normal mb-0">$19<span>/Month</span></h1>
</div>
<div class="price-features mt-5">
<p><i class="mdi mdi-check"></i> Bandwidth: <span class="font-weight-bold">2GB</span></p>
<p><i class="mdi mdi-check"></i> Onlinespace: <span class="font-weight-bold">1GB</span></p>
<p><i class="mdi mdi-check"></i> Support: <span class="font-weight-bold">Yes</span></p>
<p><i class="mdi mdi-check"></i> Domain: <span class="font-weight-bold">3</span></p>
<p><i class="mdi mdi-check"></i> Hidden Fees: <span class="font-weight-bold">No</span></p>
</div>
<div class="text-center mt-5">
<a href="#/" class="btn btn-custom">Join Now</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="bg-white mt-3 price-box">
<div class="pricing-name text-center">
<h4 class="mb-0">Ultimate</h4>
</div>
<div class="plan-price text-center mt-4">
<h1 class="text-custom font-weight-normal mb-0">$29<span>/Month</span></h1>
</div>
<div class="price-features mt-5">
<p><i class="mdi mdi-check"></i> Bandwidth: <span class="font-weight-bold">3GB</span></p>
<p><i class="mdi mdi-check"></i> Onlinespace: <span class="font-weight-bold">2GB</span></p>
<p><i class="mdi mdi-check"></i> Support: <span class="font-weight-bold">Yes</span></p>
<p><i class="mdi mdi-check"></i> Domain: <span class="font-weight-bold">Unlimited</span></p>
<p><i class="mdi mdi-check"></i> Hidden Fees: <span class="font-weight-bold">No</span></p>
</div>
<div class="text-center mt-5">
<a href="#/" class="btn btn-custom">Join Now</a>
</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{
background-color: #f8f9fa!important;
margin-top:20px;
}
.text-custom,
.navbar-custom .navbar-nav li a:hover,
.navbar-custom .navbar-nav li a:active,
.navbar-custom .navbar-nav li.active a,
.service-box .services-icon,
.price-features p i,
.faq-icon,
.social .social-icon:hover {
color: #f6576e !important;
}
.bg-custom,
.btn-custom,
.timeline-page .timeline-item .date-label-left::after,
.timeline-page .timeline-item .duration-right::after,.back-to-top:hover {
background-color: #f6576e;
}
.btn-custom,
.custom-form .form-control:focus,
.social .social-icon:hover,
.registration-input-box:focus {
border-color: #f6576e;
}
.service-box .services-icon,
.price-features p i {
background-color: rgba(246, 87, 110, 0.1);
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.btn-custom.focus,
.btn-custom:active,
.btn-custom:focus,
.btn-custom:hover,
.open > .dropdown-toggle.btn-custom {
border-color: #e45267;
background-color: #e45267;
}
.price-box {
padding: 40px 50px;
}
.plan-price h1 span {
font-size: 16px;
color: #000;
}
.price-features p i {
height: 20px;
width: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
font-size: 14px;
border-radius: 50%;
margin-right: 20px;
}
