Rich-React

React js UI example. tickets timeline

React js UI example and template, tickets timeline! . Take a look at this UI example and see how it can enhance your project. Your can copy or download the code and use it in your project. Don't forget to browse our library of other free React Native templates for even more design and functionality inspiration. Happy coding!
Tags: timeline,tickets

Preview Code

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 bootdeys">
    <div class="col-md-9">
        <div class="timeline-centered timeline-sm">
            <article class="timeline-entry">
                <div class="timeline-entry-inner">
                    <time datetime="2014-01-10T03:45" class="timeline-time"><span>12:45 AM</span><span>Today</span></time>
                    <div class="timeline-icon bg-violet"><i class="fa fa-exclamation"></i></div>
                    <div class="timeline-label"><h4 class="timeline-title">New Project</h4>
    
                    <p>Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial.</p></div>
                </div>
            </article>
            <article class="timeline-entry left-aligned">
                <div class="timeline-entry-inner">
                    <time datetime="2014-01-10T03:45" class="timeline-time"><span>9:15 AM</span><span>Today</span></time>
                    <div class="timeline-icon bg-green"><i class="fa fa-group"></i></div>
                    <div class="timeline-label bg-green"><h4 class="timeline-title">Job Meeting</h4>
    
                    <p>Caulie dandelion maize lentil collard greens radish arugula sweet pepper water spinach kombu courgette.</p></div>
                </div>
            </article>
            <article class="timeline-entry">
                <div class="timeline-entry-inner">
                    <time datetime="2014-01-09T13:22" class="timeline-time"><span>8:20 PM</span><span>04/03/2013</span></time>
                    <div class="timeline-icon bg-orange"><i class="fa fa-paper-plane"></i></div>
                    <div class="timeline-label bg-orange"><h4 class="timeline-title">Daily Feeds</h4>
    
                    <p><img src="https://www.bootdey.com/image/45x45/" alt="" class="timeline-img pull-left"/>Parsley amaranth tigernut silver beet maize fennel spinach ricebean black-eyed. Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial.</p></div>
                </div>
                <div class="timeline-entry-inner">
                        <div style={{/*-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);*/}} class="timeline-icon"><i class="fa fa-plus"></i></div>
                </div>
            </article>
        </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{
    margin-top:20px;
    background:#eee;
}

.timeline-centered {
  position: relative;
  margin-bottom: 30px;
}
.timeline-centered.timeline-sm .timeline-entry {
  margin-bottom: 20px !important;
}
.timeline-centered.timeline-sm .timeline-entry .timeline-entry-inner .timeline-label {
  padding: 1em;
}
.timeline-centered:before,
.timeline-centered:after {
  content: " ";
  display: table;
}
.timeline-centered:after {
  clear: both;
}
.timeline-centered:before {
  content: '';
  position: absolute;
  display: block;
  width: 7px;
  background: #ffffff;
  left: 50%;
  top: 20px;
  bottom: 20px;
  margin-left: -4px;
}
.timeline-centered .timeline-entry {
  position: relative;
  width: 50%;
  float: right;
  margin-bottom: 70px;
  clear: both;
}
.timeline-centered .timeline-entry:before,
.timeline-centered .timeline-entry:after {
  content: " ";
  display: table;
}
.timeline-centered .timeline-entry:after {
  clear: both;
}
.timeline-centered .timeline-entry.begin {
  margin-bottom: 0;
}
.timeline-centered .timeline-entry.left-aligned {
  float: left;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner {
  margin-left: 0;
  margin-right: -28px;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time {
  left: auto;
  right: -115px;
  text-align: left;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon {
  float: right;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label {
  margin-left: 0;
  margin-right: 85px;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after {
  left: auto;
  right: 0;
  margin-left: 0;
  margin-right: -9px;
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.timeline-centered .timeline-entry .timeline-entry-inner {
  position: relative;
  margin-left: -31px;
}
.timeline-centered .timeline-entry .timeline-entry-inner:before,
.timeline-centered .timeline-entry .timeline-entry-inner:after {
  content: " ";
  display: table;
}
.timeline-centered .timeline-entry .timeline-entry-inner:after {
  clear: both;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time {
  position: absolute;
  left: -115px;
  text-align: right;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span {
  display: block;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:first-child {
  font-size: 18px;
  font-weight: bold;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:last-child {
  font-size: 12px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
  background: #fff;
  color: #999999;
  display: block;
  width: 60px;
  height: 60px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  border-radius: 50%;
  text-align: center;
  border: 7px solid #ffffff;
  line-height: 45px;
  font-size: 15px;
  float: left;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary {
  background-color: #dc6767;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success {
  background-color: #5cb85c;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info {
  background-color: #5bc0de;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning {
  background-color: #f0ad4e;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger {
  background-color: #d9534f;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-red {
  background-color: #bf4346;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-green {
  background-color: #488c6c;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-blue {
  background-color: #0a819c;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-yellow {
  background-color: #f2994b;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-orange {
  background-color: #e9662c;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-pink {
  background-color: #bf3773;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-violet {
  background-color: #9351ad;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-grey {
  background-color: #4b5d67;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-dark {
  background-color: #594857;
  color: #fff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
  position: relative;
  background: #ffffff;
  padding: 1.7em;
  margin-left: 85px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-red {
  background: #bf4346;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-red:after {
  border-color: transparent #bf4346 transparent transparent;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-red .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-red p {
  color: #ffffff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-green {
  background: #488c6c;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-green:after {
  border-color: transparent #488c6c transparent transparent;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-green .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-green p {
  color: #ffffff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-orange {
  background: #e9662c;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-orange:after {
  border-color: transparent #e9662c transparent transparent;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-orange .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-orange p {
  color: #ffffff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-yellow {
  background: #f2994b;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-yellow:after {
  border-color: transparent #f2994b transparent transparent;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-yellow .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-yellow p {
  color: #ffffff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-blue {
  background: #0a819c;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-blue:after {
  border-color: transparent #0a819c transparent transparent;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-blue .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-blue p {
  color: #ffffff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink {
  background: #bf3773;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink:after {
  border-color: transparent #bf3773 transparent transparent;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink p {
  color: #ffffff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-violet {
  background: #9351ad;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-violet:after {
  border-color: transparent #9351ad transparent transparent;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-violet .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-violet p {
  color: #ffffff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-grey {
  background: #4b5d67;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-grey:after {
  border-color: transparent #4b5d67 transparent transparent;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-grey .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-grey p {
  color: #ffffff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-dark {
  background: #594857;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-dark:after {
  border-color: transparent #594857 transparent transparent;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-dark .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-dark p {
  color: #ffffff;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 9px 9px 0;
  border-color: transparent #ffffff transparent transparent;
  left: 0;
  top: 20px;
  margin-left: -9px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .timeline-title,
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p {
  color: #999999;
  margin: 0;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p + p {
  margin-top: 15px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .timeline-title {
  margin-bottom: 10px;
  font-family: 'Oswald';
  font-weight: bold;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .timeline-title span {
  -webkit-opacity: .6;
  -moz-opacity: .6;
  opacity: .6;
  -ms-filter: alpha(opacity=60);
  filter: alpha(opacity=60);
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p .timeline-img {
  margin: 5px 10px 0 0;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p .timeline-img.pull-right {
  margin: 5px 0 0 10px;
}

Similar snippets

Find more similar snippets using the following tags:timeline,tickets

React js template and ui example bs4 account tickets

bs4 account tickets

View
React js template and ui example left timeline

left timeline

View
React js template and ui example timeline with year and date

timeline with year and date

View
React js template and ui example timeline events

timeline events

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example product full detail

product full detail

View
React js template and ui example user profile cover with links

user profile cover with links

View
React js template and ui example bs4 project list

bs4 project list

View