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>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container bootstrap snippets bootdey">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row well bg-themeprimary no-margin">
<div class="">
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="plan-circular">
<span class="plan-title">STARTER</span>
<hr class="title-devider"/>
<div class="plan-body">
<div class="plan-currency">$</div>
<div class="plan-price">35</div>
<div class="plan-month">monthly</div>
</div>
<div class="plan-tag bg-themesecondary">
<i class="tag-icon fa fa-times"></i>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="plan-circular">
<span class="plan-title">STANDARD</span>
<hr class="title-devider"/>
<div class="plan-body">
<div class="plan-currency">$</div>
<div class="plan-price">45</div>
<div class="plan-month">monthly</div>
</div>
<div class="plan-tag bg-themethirdcolor">
<i class="tag-icon fa fa-times"></i>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="plan-circular animated flipInX">
<span class="plan-title">PROFESSIONAL</span>
<hr class="title-devider"/>
<div class="plan-body">
<div class="plan-currency">$</div>
<div class="plan-price">55</div>
<div class="plan-month">monthly</div>
</div>
<div class="plan-tag bg-themefourthcolor">
<i class="tag-icon fa fa-check"></i>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="plan-circular">
<span class="plan-title">ENTERPRISE</span>
<hr class="title-devider"/>
<div class="plan-body">
<div class="plan-currency">$</div>
<div class="plan-price">65</div>
<div class="plan-month">monthly</div>
</div>
<div class="plan-tag bg-themefifthcolor">
<i class="tag-icon fa fa-times"></i>
</div>
</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 :
body{
background:#eee;
margin-top:20px;
}
.well[class*="bg-"] {
color: #f5f5f5;
}
.plan-circular {
margin: 10px auto;
text-align: center;
}
.no-margin {
margin: 0 !important;
}
.plan-circular .plan-title {
color: #fff;
}
.plan-circular .title-devider {
margin: 10px 40%;
border-color: #fff;
}
.plan-circular .plan-body {
position: relative;
width: 150px;
height: 150px;
background-color: #fff;
border: 10px solid rgba(255,255,255,.3);
-webkit-border-radius: 50%;
-webkit-background-clip: padding-box;
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
background-clip: padding-box;
margin: 0 auto;
font-family: 'Open Sans',sans-serif;
}
.plan-circular .plan-body .plan-currency {
position: absolute;
top: 33px;
right: 80px;
font-size: 26px;
color: #777;
}
.plan-circular .plan-body .plan-price {
position: absolute;
top: 33px;
right: 35px;
font-size: 40px;
color: #555;
}
.plan-circular .plan-body .plan-month {
position: absolute;
top: 80px;
right: 38px;
font-size: 12px;
color: #999;
}
.plan-circular .plan-tag {
width: 25px;
height: 40px;
-webkit-border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-border-radius: 2px;
-moz-background-clip: padding;
border-radius: 2px;
background-clip: padding-box;
margin: 0 auto;
margin-top: -15px;
}
.bg-themeprimary {
background-color: #2dc3e8 !important;
}
.bg-themesecondary {
background-color: #fb6e52 !important;
}
.bg-themethirdcolor {
background-color: #ffce55 !important;
}
.bg-themefourthcolor {
background-color: #a0d468 !important;
}
.bg-themefifthcolor {
background-color: #e75b8d !important;
}