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">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-body bg-primary text-white mailbox-widget pb-0">
<h2 class="text-white pb-3">Your Mailbox</h2>
<ul class="nav nav-tabs custom-tab border-bottom-0 mt-4" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="inbox-tab" data-toggle="tab" aria-controls="inbox" href="#inbox" role="tab" aria-selected="true">
<span class="d-block d-md-none"><i class="ti-email"></i></span>
<span class="d-none d-md-block"> INBOX</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="sent-tab" data-toggle="tab" aria-controls="sent" href="#sent" role="tab" aria-selected="false">
<span class="d-block d-md-none"><i class="ti-export"></i></span>
<span class="d-none d-md-block">SENT</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="spam-tab" data-toggle="tab" aria-controls="spam" href="#spam" role="tab" aria-selected="false">
<span class="d-block d-md-none"><i class="ti-panel"></i></span>
<span class="d-none d-md-block">SPAM</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="delete-tab" data-toggle="tab" aria-controls="delete" href="#delete" role="tab" aria-selected="false">
<span class="d-block d-md-none"><i class="ti-trash"></i></span>
<span class="d-none d-md-block">DELETED</span>
</a>
</li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade active show" id="inbox" aria-labelledby="inbox-tab" role="tabpanel">
<div>
<div class="row p-4 no-gutters align-items-center">
<div class="col-sm-12 col-md-6">
<h3 class="font-light mb-0"><i class="ti-email mr-2"></i>350 Unread emails</h3>
</div>
<div class="col-sm-12 col-md-6">
<ul class="list-inline dl mb-0 float-left float-md-right">
<li class="list-inline-item text-info mr-3">
<a href="#/">
<button class="btn btn-circle btn-success text-white" href="javascript:void(0)">
<i class="fa fa-plus"></i>
</button>
<span class="ml-2 font-normal text-dark">Compose</span>
</a>
</li>
<li class="list-inline-item text-danger">
<a href="#/">
<button class="btn btn-circle btn-danger text-white" href="javascript:void(0)">
<i class="fa fa-trash"></i>
</button>
<span class="ml-2 font-normal text-dark">Delete</span>
</a>
</li>
</ul>
</div>
</div>
<div class="table-responsive">
<table class="table email-table no-wrap table-hover v-middle mb-0 font-14">
<tbody>
<tr>
<td class="pl-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cst1" />
<label class="custom-control-label" for="cst1"> </label>
</div>
</td>
<td><i class="fa fa-star text-warning"></i></td>
<td>
<span class="mb-0 text-muted">Hritik Roshan</span>
</td>
<td>
<a class="link" href="javascript: void(0)">
<span class="badge badge-pill text-white font-medium badge-danger mr-2">Work</span>
<span class="text-dark">Lorem ipsum perspiciatis-</span>
</a>
</td>
<td><i class="fa fa-paperclip text-muted"></i></td>
<td class="text-muted">May 13</td>
</tr>
<tr>
<td class="pl-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cst2" />
<label class="custom-control-label" for="cst2"> </label>
</div>
</td>
<td><i class="fa fa-star"></i></td>
<td>
<span class="mb-0 text-muted">Genelia Roshan</span>
</td>
<td>
<a class="link" href="javascript: void(0)">
<span class="badge badge-pill text-white font-medium badge-info mr-2">Business</span>
<span class="text-dark">Inquiry about license for Admin </span>
</a>
</td>
<td><i class="fa fa-paperclip text-muted"></i></td>
<td class="text-muted">May 13</td>
</tr>
<tr>
<td class="pl-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cst3" />
<label class="custom-control-label" for="cst3"> </label>
</div>
</td>
<td><i class="fa fa-star text-warning"></i></td>
<td class="user-name max-texts">
<span class="mb-0 text-muted font-light">Ritesh Deshmukh</span>
</td>
<td>
<a class="link" href="javascript: void(0)">
<span class="badge badge-pill text-white font-medium badge-warning mr-2">Friend</span>
<span class="font-light text-dark">Bitbucket (commit Pushed) by Ritesh</span>
</a>
</td>
<td><i class="fa fa-paperclip text-muted"></i></td>
<td class="text-muted font-light">May 13</td>
</tr>
<tr class="">
<td class="pl-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cst4" />
<label class="custom-control-label" for="cst4"> </label>
</div>
</td>
<td><i class="fa fa-star"></i></td>
<td>
<span class="mb-0 text-muted font-light">Akshay Kumar</span>
</td>
<td>
<a class="link" href="javascript: void(0)">
<span class="badge badge-pill text-white font-medium badge-info mr-2">Work</span><span class="font-light text-dark">Perspiciatis unde omnis- iste Lorem ipsum</span>
</a>
</td>
<td><i class="fa fa-paperclip text-muted"></i></td>
<td class="text-muted font-light">May 9</td>
</tr>
<tr class="">
<td class="pl-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cst5" />
<label class="custom-control-label" for="cst5"> </label>
</div>
</td>
<td><i class="fa fa-star"></i></td>
<td>
<span class="mb-0 text-muted font-light">John Abraham</span>
</td>
<td>
<a class="link" href="javascript: void(0)">
<span class="badge badge-pill text-white font-medium badge-success mr-2">Work</span> <span class="font-light text-dark">Lorem ipsum perspiciatis- unde omnis</span>
</a>
</td>
<td><i class="fa fa-paperclip text-muted"></i></td>
<td class="text-muted font-light">Mar 10</td>
</tr>
<tr class="">
<td class="pl-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cst6" />
<label class="custom-control-label" for="cst6"> </label>
</div>
</td>
<td><i class="fa fa-star text-warning"></i></td>
<td>
<span class="mb-0 text-muted font-light">Akshay Kumar</span>
</td>
<td>
<a class="link" href="javascript: void(0)">
<span class="badge badge-pill text-white font-medium badge-success mr-2">Work</span> <span class="font-light text-dark">Lorem ipsum perspiciatis - unde</span>
</a>
</td>
<td><i class="fa fa-paperclip text-muted"></i></td>
<td class="text-muted font-light">Mar 09</td>
</tr>
<tr class="">
<td class="pl-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cst7" />
<label class="custom-control-label" for="cst7"> </label>
</div>
</td>
<td><i class="fa fa-star text-warning"></i></td>
<td>
<span class="mb-0 text-muted font-light">Hanna Gover</span>
</td>
<td>
<a class="link" href="javascript: void(0)">
<span class="badge badge-pill text-white font-medium badge-danger mr-2">Work</span><span class="font-light text-dark"> Unde omnis Lorem ipsum perspiciatis</span>
</a>
</td>
<td><i class="fa fa-paperclip text-muted"></i></td>
<td class="text-muted font-light">Mar 09</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane fade" id="sent" aria-labelledby="sent-tab" role="tabpanel">
<div class="row p-3 text-dark">
<div class="col-md-6">
<h3 class="font-light">Lets check profile</h3>
<h4 class="font-light">you can use it with the small code</h4>
</div>
<div class="col-md-6 text-right">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="spam" aria-labelledby="spam-tab" role="tabpanel">
<div class="row p-3 text-dark">
<div class="col-md-6">
<h3 class="font-light">Come on you have a lot message</h3>
<h4 class="font-light">you can use it with the small code</h4>
</div>
<div class="col-md-6 text-right">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="delete" aria-labelledby="delete-tab" role="tabpanel">
<div class="row p-3 text-dark">
<div class="col-md-6">
<h3 class="font-light">Just do Settings</h3>
<h4 class="font-light">you can use it with the small code</h4>
</div>
<div class="col-md-6 text-right">
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a.</p>
</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: #edf1f5;
margin-top:20px;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0 solid transparent;
border-radius: 0;
}
.mailbox-widget .custom-tab .nav-item .nav-link {
border: 0;
color: #fff;
border-bottom: 3px solid transparent;
}
.mailbox-widget .custom-tab .nav-item .nav-link.active {
background: 0 0;
color: #fff;
border-bottom: 3px solid #2cd07e;
}
.no-wrap td, .no-wrap th {
white-space: nowrap;
}
.table td, .table th {
padding: .9375rem .4rem;
vertical-align: top;
border-top: 1px solid rgba(120,130,140,.13);
}
.font-light {
font-weight: 300;
}
