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>
<div class="container">
<div class="table-responsive-lg aos-init aos-animate" data-aos="fade-up">
<table class="table table-lg table-hover table-borderless bg-white">
<thead class="border-bottom">
<tr class="text-center">
<th scope="col" class="text-left">
<div class="mb-5">
<div class="h4 font-weight-bold">Choose a Plan</div>
<p class="font-weight-normal text-muted font-size-sm d-lg-none">Scroll to view more plans --></p>
</div>
</th>
<th scope="col" class="text-center text-nowrap">
<div class="h4 font-weight-bold mb-0">Basic</div>
<p class="font-weight-normal text-muted">free forever</p>
<a href="javascript:;" class="btn btn-white btn-sm waves-effect mt-3" role="button">Get Basic</a>
</th>
<th scope="col" class="text-center text-nowrap">
<div class="h4 font-weight-bold mb-0">Pro</div>
<p class="font-weight-normal text-muted">$10/mo<br/>$8/mo annually</p>
<a href="javascript:;" class="btn btn-white btn-sm waves-effect mt-3" role="button">Get Pro</a>
</th>
<th scope="col" class="text-center text-nowrap">
<div class="h4 font-weight-bold mb-0">Business</div>
<p class="font-weight-normal text-muted">$15/mo<br/>$12/mo annually</p>
<a href="javascript:;" class="btn btn-primary btn-sm waves-effect mt-3" role="button">Get Business</a>
</th>
<th scope="col" class="text-center text-nowrap">
<div class="h4 font-weight-bold mb-0">Enterprice</div>
<p class="font-weight-normal text-muted">$45/mo<br/>$40/mo annually</p>
<a href="javascript:;" class="btn btn-white btn-sm waves-effect mt-3" role="button">Get Enterprice</a>
</th>
</tr>
</thead>
<tbody>
<tr class="border-bottom bg-light">
<th scope="row" class="h6 py-3 font-weight-semibold text-nowrap border-0 mb-0">Contact & Account Management</th>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Email Marketing Contacts</th>
<td class="text-center">100</td>
<td class="text-center">500</td>
<td class="text-center">1000</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Contact Lifecycle Stages</th>
<td class="text-center">-</td>
<td class="text-center">2</td>
<td class="text-center">5</td>
<td class="text-center">10</td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Audits per day
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center">100</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Crawl credits per month
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center">-</td>
<td class="text-center">-</td>
<td class="text-center">50</td>
<td class="text-center">100</td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Live Tracking</th>
<td class="text-center">-</td>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr class="border-top border-bottom bg-light">
<th scope="row" class="h6 py-3 font-weight-semibold border-0 mb-0">Sales Management</th>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Deal Management
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Visual Sales Pipelines</th>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Multiple Sales Pipelines
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center">-</td>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Sales Goals</th>
<td class="text-center">-</td>
<td class="text-center">-</td>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr class="border-top border-bottom bg-light">
<th scope="row" class="h6 py-3 font-weight-semibold border-0 mb-0">Product Customization</th>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Page customization
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Custom fields</th>
<td class="text-center">-</td>
<td class="text-center">150</td>
<td class="text-center">200</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Custom links</th>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Custom modules
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center">-</td>
<td class="text-center">-</td>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Page layouts
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center">-</td>
<td class="text-center">2</td>
<td class="text-center">5</td>
<td class="text-center">10</td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Validation Rules
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center">-</td>
<td class="text-center">10</td>
<td class="text-center">100</td>
<td class="text-center">500</td>
</tr>
<tr class="border-top border-bottom bg-light">
<th scope="row" class="h6 py-3 font-weight-semibold border-0 mb-0">Marketing Automation</th>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
<td class="py-3 border-0"></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Email templates</th>
<td class="text-center">10</td>
<td class="text-center">50</td>
<td class="text-center">Unlimited</td>
<td class="text-center">Unlimited</td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Website visitor tracking
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Mass email
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Marketing Attribution</th>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Auto-responders
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center">-</td>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr>
<th class="font-weight-normal" scope="row">Customer segmentation
<span class="badge badge-light border rounded-circle hw-18" data-toggle="popover" role="button" data-trigger="hover" data-placement="top" data-content="Group Messaging is characterized by an SMS conversation among 3 or more recipients at the same time." data-original-title="" title="">?</span>
</th>
<td class="text-center">-</td>
<td class="text-center">-</td>
<td class="text-center"><span class="say-yes"></span></td>
<td class="text-center"><span class="say-yes"></span></td>
</tr>
<tr class="text-center bg-white">
<th scope="col"></th>
<th scope="col" class="text-center text-nowrap">
<a href="javascript:;" class="btn btn-white btn-sm waves-effect mt-3" role="button">Get Basic</a>
</th>
<th scope="col" class="text-center text-nowrap">
<a href="javascript:;" class="btn btn-white btn-sm waves-effect mt-3" role="button">Get Pro</a>
</th>
<th scope="col" class="text-center text-nowrap">
<a href="javascript:;" class="btn btn-primary btn-sm waves-effect mt-3" role="button">Get Business</a>
</th>
<th scope="col" class="text-center text-nowrap">
<a href="javascript:;" class="btn btn-white btn-sm waves-effect mt-3" role="button">Get Enterprice</a>
</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{padding-top:20px;}
.hw-18 {
height: 18px!important;
min-width: 18px!important;
width: 18px!important;
}
.rounded-circle {
border-radius: 50%!important;
}
.border {
border: 1px solid #cbd5e1!important;
}
.badge-light {
color: #101729;
background-color: #f1f4f9;
}
.badge {
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.say-yes:before {
content: "";
vertical-align: middle;
display: inline-block;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2314b89c' d='M9.707 19.121a.997.997 0 01-1.414 0l-5.646-5.647a1.5 1.5 0 010-2.121l.707-.707a1.5 1.5 0 012.121 0L9 14.171l9.525-9.525a1.5 1.5 0 012.121 0l.707.707a1.5 1.5 0 010 2.121z'/%3E%3C/svg%3E");
}
.say-yes, .say-yes:before {
height: 1.5rem;
width: 1.5rem;
}
.say-yes {
position: relative;
display: block;
margin: 0 auto;
}
.btn-white {
border: 1px solid #cbd5e1;
background-color: #fff;
}
.mt-3, .my-3 {
margin-top: 1rem!important;
}
.btn-group-sm>.btn, .btn-sm {
padding: .7rem 1.55rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .25rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
.table.table-lg td, .table.table-lg th {
padding: 1rem .75rem;
}
.table.table-lg td, .table.table-lg th {
padding: 1rem .75rem;
}
.table-borderless tbody+tbody, .table-borderless td, .table-borderless th, .table-borderless thead th {
border: 0;
}
