React js UI example. Choose a Plan Table

React js UI example and template, Choose a Plan Table! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: plan,plan-table,pricing,pricing-table,pricing-plan

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 start

2. 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 again

3. 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 --&gt;</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 &amp; 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;
}

Similar snippets

React js template and ui example Combine Pricing table elegance

Combine Pricing table elegance

React js template and ui example pricing tables

pricing tables

React js template and ui example modern price section

modern price section

React js template and ui example services prices

services prices

React js template and ui example bs5 dark footer

bs5 dark footer

React js template and ui example contacts list table

contacts list table

React js template and ui example chat app

chat app

React js template and ui example chat room

chat room