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">
<ul class="notes">
<li>
<div class="rotate-1 lazur-bg">
<small>12:03:28 12-04-2014</small>
<h4>Awesome title</h4>
<p>The years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<a href="#/" class="text-danger pull-right"><i class="fa fa-trash-o "></i></a>
</div>
</li>
<li>
<div class="rotate-2 red-bg">
<small>12:03:28 12-04-2014</small>
<h4>Awesome date</h4>
<p>The years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<a href="#/" class="text-danger pull-right"><i class="fa fa-trash-o "></i></a>
</div>
</li>
<li>
<div class="rotate-1 yellow-bg">
<small>12:03:28 12-04-2014</small>
<h4>Awesome project</h4>
<p>The years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<a href="#/" class="text-danger pull-right"><i class="fa fa-trash-o "></i></a>
</div>
</li>
</ul>
</div>
</div>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{margin-top:20px;}
ul.notes li {
margin: 10px 40px 50px 0px;
float: left;
}
ul.notes li, ul.tag-list li {
list-style: none;
}
ul.notes li div small {
position: absolute;
top: 5px;
right: 5px;
font-size: 10px;
}
div.rotate-1 {
-webkit-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
}
div.rotate-2 {
-o-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
position: relative;
top: 5px;
}
.lazur-bg {
background-color: #23c6c8;
color: #ffffff;
}
.red-bg {
background-color: #ed5565;
color: #ffffff;
}
.navy-bg {
background-color: #1ab394;
color: #ffffff;
}
.yellow-bg {
background-color: #f8ac59;
color: #ffffff;
}
ul.notes li div {
text-decoration: none;
color: #000;
display: block;
height: 210px;
width: 210px;
padding: 1em;
-moz-box-shadow: 5px 5px 7px #212121;
-webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
-moz-transition: -moz-transform 0.15s linear;
-o-transition: -o-transform 0.15s linear;
-webkit-transition: -webkit-transform 0.15s linear;
}
