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://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-sm-4">
<div class="tile pt-inner">
<div class="pti-header bg-amber">
<h2>$25 <small>| mo</small></h2>
<div class="ptih-title">Banana Pack</div>
</div>
<div class="pti-body">
<div class="ptib-item">
Pellentesque habitant morbi tristique senectus et netusmalesuada fames ac turpis egestas. imperdiet tristique.
</div>
<div class="ptib-item">
In dapibus ipsum sit amet leo
</div>
<div class="ptib-item">
Vestibulum ut mauris tellus. Donec
</div>
<div class="ptib-item">
Purna lectus venenatis felis, nonsemper
</div>
<div class="ptib-item">
Aliquam erat volutpat hasellus ultri
</div>
</div>
<div class="pti-footer">
<a href="" class="bg-amber"><i class="fa fa-check"></i></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="tile pt-inner">
<div class="pti-header bg-green">
<h2>$65 <small>| mo</small></h2>
<div class="ptih-title">Papaya Pack</div>
</div>
<div class="pti-body">
<div class="ptib-item">
Nullam diam dolor, sollicitudin vitae magna ut, pharetra tempor velit. Donec quis egestas nisl, id porta mi. Phasellus eleifend facilisis
</div>
<div class="ptib-item">
Ina enim liberosed whens
</div>
<div class="ptib-item">
Sipsum maunich lendilwer
</div>
<div class="ptib-item">
Dacider mengthu ferine looking seth
</div>
<div class="ptib-item">
Sinnab wanliset wareder thenli
</div>
</div>
<div class="pti-footer">
<a href="" class="bg-green"><i class="fa fa-check"></i></a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="tile pt-inner">
<div class="pti-header bg-cyan">
<h2>$660 <small>| mo</small></h2>
<div class="ptih-title">Orange Pack</div>
</div>
<div class="pti-body">
<div class="ptib-item">
Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris iaculis laoreet mattis piuminer lasethol and envy
</div>
<div class="ptib-item">
Maricial wendys boraoand denish
</div>
<div class="ptib-item">
Manchil vallao whengoo
</div>
<div class="ptib-item">
Shaeel ipsum leeshan
</div>
<div class="ptib-item">
Hasellus ultrices tincidunt
</div>
</div>
<div class="pti-footer">
<a href="" class="bg-cyan"><i class="fa fa-check"></i></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:#eee;
margin-top:20px;
}
.pt-inner {
text-align: center;
}
.tile {
background-color: #fff;
margin-bottom: 30px;
position: relative;
}
.tile {
box-shadow: 0 1px 1px rgba(0,0,0,.07);
}
.pt-inner .pti-header {
padding: 45px 10px 70px;
color: #fff;
position: relative;
margin-bottom: 15px;
}
.bg-amber {
background-color: #ffc107!important;
}
.bg-green {
background-color: #4caf50!important;
}
.bg-cyan {
background-color: #00bcd4!important;
}
.pt-inner .pti-header>h2 {
margin: 0;
line-height: 100%;
color: #fff;
font-weight: 100;
font-size: 50px;
}
.pt-inner .pti-header>h2 small {
color: #fff;
letter-spacing: 0;
vertical-align: top;
font-size: 16px;
font-weight: 100;
}
.pt-inner .pti-header .ptih-title {
background-color: rgba(0,0,0,.1);
padding: 8px 10px 9px;
margin: 0 -10px;
position: absolute;
width: 100%;
bottom: 0;
}
.pt-inner .pti-header .ptih-title {
text-transform: uppercase;
}
.pt-inner .pti-body {
padding: 0 23px;
}
.pt-inner .pti-body .ptib-item:not(:last-child) {
border-bottom: 1px solid #eee;
}
.pt-inner .pti-body .ptib-item {
padding: 15px 0;
font-weight: 400;
}
.pt-inner .pti-footer {
padding: 10px 20px 30px;
}
.pt-inner .pti-footer>a {
width: 60px;
height: 60px;
border-radius: 50%;
color: #fff;
display: inline-block;
line-height: 60px;
font-size: 30px;
}
