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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<div class="container">
<div class="row ">
<div class="col-xl-6 col-lg-6">
<div class="card l-bg-cherry">
<div class="card-statistic-3 p-4">
<div class="card-icon card-icon-large"><i class="fas fa-shopping-cart"></i></div>
<div class="mb-4">
<h5 class="card-title mb-0">New Orders</h5>
</div>
<div class="row align-items-center mb-2 d-flex">
<div class="col-8">
<h2 class="d-flex align-items-center mb-0">
3,243
</h2>
</div>
<div class="col-4 text-right">
<span>12.5% <i class="fa fa-arrow-up"></i></span>
</div>
</div>
<div class="progress mt-1 " data-height="8" style={{/*height: 8px;*/}}>
<div class="progress-bar l-bg-cyan" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style={{/*width: 25%;*/}}></div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="card l-bg-blue-dark">
<div class="card-statistic-3 p-4">
<div class="card-icon card-icon-large"><i class="fas fa-users"></i></div>
<div class="mb-4">
<h5 class="card-title mb-0">Customers</h5>
</div>
<div class="row align-items-center mb-2 d-flex">
<div class="col-8">
<h2 class="d-flex align-items-center mb-0">
15.07k
</h2>
</div>
<div class="col-4 text-right">
<span>9.23% <i class="fa fa-arrow-up"></i></span>
</div>
</div>
<div class="progress mt-1 " data-height="8" style={{/*height: 8px;*/}}>
<div class="progress-bar l-bg-green" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style={{/*width: 25%;*/}}></div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="card l-bg-green-dark">
<div class="card-statistic-3 p-4">
<div class="card-icon card-icon-large"><i class="fas fa-ticket-alt"></i></div>
<div class="mb-4">
<h5 class="card-title mb-0">Ticket Resolved</h5>
</div>
<div class="row align-items-center mb-2 d-flex">
<div class="col-8">
<h2 class="d-flex align-items-center mb-0">
578
</h2>
</div>
<div class="col-4 text-right">
<span>10% <i class="fa fa-arrow-up"></i></span>
</div>
</div>
<div class="progress mt-1 " data-height="8" style={{/*height: 8px;*/}}>
<div class="progress-bar l-bg-orange" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style={{/*width: 25%;*/}}></div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="card l-bg-orange-dark">
<div class="card-statistic-3 p-4">
<div class="card-icon card-icon-large"><i class="fas fa-dollar-sign"></i></div>
<div class="mb-4">
<h5 class="card-title mb-0">Revenue Today</h5>
</div>
<div class="row align-items-center mb-2 d-flex">
<div class="col-8">
<h2 class="d-flex align-items-center mb-0">
$11.61k
</h2>
</div>
<div class="col-4 text-right">
<span>2.5% <i class="fa fa-arrow-up"></i></span>
</div>
</div>
<div class="progress mt-1 " data-height="8" style={{/*height: 8px;*/}}>
<div class="progress-bar l-bg-cyan" role="progressbar" data-width="25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style={{/*width: 25%;*/}}></div>
</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 :
.card {
background-color: #fff;
border-radius: 10px;
border: none;
position: relative;
margin-bottom: 30px;
box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,0.1), 0 0.9375rem 1.40625rem rgba(90,97,105,0.1), 0 0.25rem 0.53125rem rgba(90,97,105,0.12), 0 0.125rem 0.1875rem rgba(90,97,105,0.1);
}
.l-bg-cherry {
background: linear-gradient(to right, #493240, #f09) !important;
color: #fff;
}
.l-bg-blue-dark {
background: linear-gradient(to right, #373b44, #4286f4) !important;
color: #fff;
}
.l-bg-green-dark {
background: linear-gradient(to right, #0a504a, #38ef7d) !important;
color: #fff;
}
.l-bg-orange-dark {
background: linear-gradient(to right, #a86008, #ffba56) !important;
color: #fff;
}
.card .card-statistic-3 .card-icon-large .fas, .card .card-statistic-3 .card-icon-large .far, .card .card-statistic-3 .card-icon-large .fab, .card .card-statistic-3 .card-icon-large .fal {
font-size: 110px;
}
.card .card-statistic-3 .card-icon {
text-align: center;
line-height: 50px;
margin-left: 15px;
color: #000;
position: absolute;
right: -5px;
top: 20px;
opacity: 0.1;
}
.l-bg-cyan {
background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
color: #fff;
}
.l-bg-green {
background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%) !important;
color: #fff;
}
.l-bg-orange {
background: linear-gradient(to right, #f9900e, #ffba56) !important;
color: #fff;
}
.l-bg-cyan {
background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
color: #fff;
}
