Rich-React

React js UI example. Jobs tabs

React js UI example and template, Jobs tabs! . 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: jobs,careers

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.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="tr-job-posted section-padding">
    <div class="container">
		<div class="job-tab text-center">
			<ul class="nav nav-tabs justify-content-center" role="tablist">
				<li role="presentation" class="active">
					<a class="active show" href="#hot-jobs" aria-controls="hot-jobs" role="tab" data-toggle="tab" aria-selected="true">Hot Jobs</a>
				</li>
				<li role="presentation"><a href="#recent-jobs" aria-controls="recent-jobs" role="tab" data-toggle="tab" class="" aria-selected="false">Recent Jobs</a></li>
				<li role="presentation"><a href="#popular-jobs" aria-controls="popular-jobs" role="tab" data-toggle="tab" class="" aria-selected="false">Popular Jobs</a></li>
			</ul>
			<div class="tab-content text-left">
				<div role="tabpanel" class="tab-pane fade active show" id="hot-jobs">
					<div class="row">
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Project Manager</a>
											<span><a href="#/">Dig File</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/7B68EE/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Project Manager</a>
										<span><a href="#/">Dig File</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted 23 hours ago</span>
									</div>																				
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Part Time</a>
										<span class="tr-title">
											<a href="#/">Design Associate</a>
											<span><a href="#/">Loop</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/F0F8FF/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Associate</a>
										<span><a href="#/">Loop</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="part-time">Part Time</span></a>
										<span class="pull-right">Posted 1 day ago</span>
									</div>			
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Freelance</a>
										<span class="tr-title">
											<a href="#/">Graphic Designer</a>
											<span><a href="#/">Humanity Creative</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/00FFFF/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Graphic Designer</a>
										<span><a href="#/">Humanity Creative</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="freelance">Freelance</span></a>
										<span class="pull-right">Posted 10 day ago</span>
									</div>			
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Design Consultant</a>
											<span><a href="#/">Families</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/7FFFD4/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Consultant</a>
										<span><a href="#/">Families</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted Oct 09, 2017</span>
									</div>				
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Part Time</a>
										<span class="tr-title">
											<a href="#/">Project Manager</a>
											<span><a href="#/">Sky Creative</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/8A2BE2/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Project Manager</a>
										<span><a href="#/">Sky Creative</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>	
									<div class="time">
										<a href="#/"><span class="part-time">Part Time</span></a>
										<span class="pull-right">Posted 1 day ago</span>
									</div>			
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Freelance</a>
										<span class="tr-title">
											<a href="#/">Design Associate</a>
											<span><a href="#/">Pencil</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/5F9EA0/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Associate</a>
										<span><a href="#/">Pencil</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="freelance">Freelance</span></a>
										<span class="pull-right">Posted 23 hours ago</span>
									</div>				
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Graphic Designer</a>
											<span><a href="#/">Fox</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/6495ED/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Graphic Designer</a>
										<span><a href="#/">Fox</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted Oct 09, 2017</span>
									</div>				
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/"><span class="btn btn-primary">Part Time</span></a>
										<span class="tr-title">
											<a href="#/">Design Consultant</a>
											<span><a href="#/">Owl</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/FF7F50/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Consultant</a>
										<span><a href="#/">Owl</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="part-time">Part Time</span></a>
										<span class="pull-right">Posted 10 day ago</span>
									</div>			
								</div>
							</div>
						</div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane fade in" id="recent-jobs">
					<div class="row">
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Part Time</a>
										<span class="tr-title">
											<a href="#/">Design Associate</a>
											<span><a href="#/">Loop</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/DC143C/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Associate</a>
										<span><a href="#/">Loop</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="part-time">Part Time</span></a>
										<span class="pull-right">Posted 1 day ago</span>
									</div>				
								</div>
							</div>
						</div>						
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Project Manager</a>
											<span><a href="#/">Dig File</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/00008B/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Project Manager</a>
										<span><a href="#/">Dig File</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted 23 hours ago</span>
									</div>			
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Part Time</a>
										<span class="tr-title">
											<a href="#/">Design Consultant</a>
											<span><a href="#/">Families</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/00CED1/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Consultant</a>
										<span><a href="#/">Families</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="part-time">Part Time</span></a>
										<span class="pull-right">Posted Oct 09, 2017</span>
									</div>				
								</div>
							</div>
						</div>							
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Freelance</a>
										<span class="tr-title">
											<a href="#/">Graphic Designer</a>
											<span><a href="#/">Humanity Creative</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/696969/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Graphic Designer</a>
										<span><a href="#/">Humanity Creative</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="freelance">Freelance</span></a>
										<span class="pull-right">Posted 10 day ago</span>
									</div>				
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Design Associate</a>
											<span><a href="#/">Pencil</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/008000/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Associate</a>
										<span><a href="#/">Pencil</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>	
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted 23 hours ago</span>
									</div>			
								</div>
							</div>
						</div>							
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Freelance</a>
										<span class="tr-title">
											<a href="#/">Project Manager</a>
											<span><a href="#/">Sky Creative</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/FF69B4/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Project Manager</a>
										<span><a href="#/">Sky Creative</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="freelance">Freelance</span></a>
										<span class="pull-right">Posted 1 day ago</span>
									</div>			
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Part Time</a>
										<span class="tr-title">
											<a href="#/">Design Consultant</a>
											<span><a href="#/">Owl</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/CD5C5C/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Consultant</a>
										<span><a href="#/">Owl</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="part-time">Part Time</span></a>
										<span class="pull-right">Posted 10 day ago</span>
									</div>				
								</div>
							</div>
						</div>							
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Graphic Designer</a>
											<span><a href="#/">Fox</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/90EE90/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Graphic Designer</a>
										<span><a href="#/">Fox</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted Oct 09, 2017</span>
									</div>				
								</div>
							</div>
						</div>
					</div>	
				</div>
				<div role="tabpanel" class="tab-pane fade in" id="popular-jobs">
					<div class="row">
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Graphic Designer</a>
											<span><a href="#/">Fox</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/87CEFA/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Graphic Designer</a>
										<span><a href="#/">Fox</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>	
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted Oct 09, 2017</span>
									</div>			
								</div>
							</div>
						</div>						
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Part Time</a>
										<span class="tr-title">
											<a href="#/">Design Associate</a>
											<span><a href="#/">Loop</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/FFB6C1/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Associate</a>
										<span><a href="#/">Loop</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="part-time">Part Time</span></a>
										<span class="pull-right">Posted 1 day ago</span>
									</div>			
								</div>
							</div>
						</div>						
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Project Manager</a>
											<span><a href="#/">Dig File</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/D3D3D3/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Project Manager</a>
										<span><a href="#/">Dig File</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted 23 hours ago</span>
									</div>				
								</div>
							</div>
						</div>
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Freelance</a>
										<span class="tr-title">
											<a href="#/">Graphic Designer</a>
											<span><a href="#/">Humanity Creative</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/B0C4DE/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Graphic Designer</a>
										<span><a href="#/">Humanity Creative</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="freelance">Freelance</span></a>
										<span class="pull-right">Posted 10 day ago</span>
									</div>			
								</div>
							</div>
						</div>							
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Design Consultant</a>
											<span><a href="#/">Families</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/BA55D3/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Consultant</a>
										<span><a href="#/">Families</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted Oct 09, 2017</span>
									</div>			
								</div>
							</div>
						</div>							
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Freelance</a>
										<span class="tr-title">
											<a href="#/">Design Associate</a>
											<span><a href="#/">Pencil</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/48D1CC/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Associate</a>
										<span><a href="#/">Pencil</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>	
									<div class="time">
										<a href="#/"><span class="freelance">Freelance</span></a>
										<span class="pull-right">Posted 23 hours ago</span>
									</div>		
								</div>
							</div>
						</div>	
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Part Time</a>
										<span class="tr-title">
											<a href="#/">Design Consultant</a>
											<span><a href="#/">Owl</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/9370DB/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Design Consultant</a>
										<span><a href="#/">Owl</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span class="part-time">Part Time</span></a>
										<span class="pull-right">Posted 10 day ago</span>
									</div>			
								</div>
							</div>
						</div>														
						<div class="col-md-6 col-lg-3">
							<div class="job-item">
								<div class="item-overlay">
									<div class="job-info">
										<a href="#/" class="btn btn-primary">Full Time</a>
										<span class="tr-title">
											<a href="#/">Project Manager</a>
											<span><a href="#/">Sky Creative</a></span>
										</span>
										<ul class="tr-list job-meta">
											<li><i class="fa fa-map-signs" aria-hidden="true"></i>San Francisco, CA, US</li>
											<li><i class="fa fa-briefcase" aria-hidden="true"></i>Mid Level</li>
											<li><i class="fa fa-money" aria-hidden="true"></i>$5,000 - $6,000</li>
										</ul>
										<ul class="job-social tr-list">
											<li><a href="#/"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-expand" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a></li>
											<li><a href="#/"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li>
										</ul>
									</div>										
								</div>								
								<div class="job-info">
									<div class="company-logo">
										<img src="https://www.bootdey.com/image/300x100/48D1CC/000000" alt="images" class="img-fluid"/>
									</div>
									<span class="tr-title">
										<a href="#/">Project Manager</a>
										<span><a href="#/">Sky Creative</a></span>
									</span>
									<ul class="tr-list job-meta">
										<li><span><i class="fa fa-map-signs" aria-hidden="true"></i></span>San Francisco, CA, US</li>
										<li><span><i class="fa fa-briefcase" aria-hidden="true"></i></span>Mid Level</li>
										<li><span><i class="fa fa-money" aria-hidden="true"></i></span>$5,000 - $6,000</li>
									</ul>
									<div class="time">
										<a href="#/"><span>Full Time</span></a>
										<span class="pull-right">Posted 1 day ago</span>
									</div>				
								</div>
							</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-color: #f5f4f5;
    margin-top:20px;
}

/* Tr Job Post */

.job-item {
    background-color: #fff;
}

.job-tab .nav-tabs {
	margin-bottom: 60px;
	border-bottom: 0;
}

.job-tab .nav-tabs>li {
	float: none;
	display: inline;
}

.job-tab .nav-tabs li {
	margin-right: 15px;
}

.job-tab .nav-tabs li:last-child {
	margin-right: 0;
}

.job-tab .nav-tabs {
	position: relative;
	z-index: 1;
	display: inline-block;
}

.job-tab .nav-tabs:after {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #fff;
	z-index: -1;
}



.job-tab .nav-tabs>li a {
	display: inline-block;
	background-color: #fff;
	border: none;
	border-radius: 30px;
	font-size: 14px;
	color: #000;
	padding: 5px 30px;
}

.job-tab .nav-tabs>li>a.active, 
.job-tab .nav-tabs>li a.active>:focus, 
.job-tab .nav-tabs>li>a.active:hover,
.job-tab .nav-tabs>li>a:hover {
	border: none;
	background-color: #008def;
	color: #fff;
}

.job-item {
	border-radius: 3px;
	position: relative;
	margin-bottom: 30px;
	z-index: 1;
}

.job-item .btn.btn-primary {
	text-transform: capitalize;
}

.job-item .job-info {
	font-size: 14px;
	color: #000;
	overflow: hidden;
	padding: 40px 25px 20px;
}

.job-info .company-logo {
	margin-bottom: 30px;
}

.job-info .tr-title {
	margin-bottom: 15px;
}

.job-info .tr-title span {
	font-size: 14px;
	display: block;
}

.job-info .tr-title a {
	color: #000;
}

.job-info .tr-title a:hover {
	color: #008def;
}

.job-info ul {
	margin-bottom: 30px;
}

.job-meta li,
.job-meta li a {
	color: #646464;	
}

.job-meta li a:hover {
	color: #008def;
}

.job-meta li {
	font-size: 12px;
	margin-bottom: 10px;
}

.job-meta li span i {
	color: #000;
}

.job-meta li i {
	margin-right: 15px;
}

.job-item .time {
	position: relative;
}

.job-item .time:after {
	position: absolute;
	content: "";
	bottom: 35px;
	left: -50px;
	width: 150%;
	height: 1px;
	background-color: #f5f4f5;
	z-index: -1;
}

.job-item:hover .time,
.job-item:hover .time:after {
	opacity: 0;
}

.job-item .time span {
	font-size: 12px;
	color: #bebebe;
	line-height: 25px;
}

.job-item .btn.btn-primary,
.role .btn.btn-primary,
.job-item .time a span {
	padding: 5px 10px;
    border-radius: 4px;
    line-height: 10px;
    font-size: 12px;
}

.job-item .time a span {
	color: #fff;
    background-color: #f1592a;
    border-color: #f1592a;	
}

.job-item .time a span.part-time {
	background-color: #00aeef;
	border-color: #00aeef;
}

.job-item .time a span.freelance {
	background-color: #92278f;
	border-color: #92278f;	
}

.job-item .item-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-color: #008def;
	color: #fff;
	opacity: 0;
	-webkit-transition: all 800ms;
	-moz-transition: all 800ms;
	-ms-transition: all 800ms;
	-o-transition: all 800ms;
	transition: all 800ms;
}

.job-item:hover .item-overlay {
	opacity: 1;
}

.item-overlay .job-info {
	padding: 45px 25px 40px;
	overflow: hidden;
}

.item-overlay .btn.btn-primary {
	background-color: #007bd4;
	border-color: #007bd4;
	margin-bottom: 10px;
}

.item-overlay .job-info,
.item-overlay .job-info ul li,
.item-overlay .job-info ul li i,
.item-overlay .job-info .tr-title a {
	color: #fff;
}

.job-social {
	margin-top: 35px;
}

.job-social li {
	float: left;
}

.job-social li + li {
	margin-left: 15px;
}

.job-social li a i {
	margin-right: 0;
	font-size: 14px;
}

.job-social li a {
	width: 35px;
	height: 35px;
	text-align: center;
	display: block;
	background-color: #007bd4;
	line-height: 35px;
	border-radius: 100%;
	border: 1px solid #007bd4;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.job-social li:last-child a {
	background-color: #fff;
}

.job-social li:last-child a i {
	color: #008def;
}

.job-social li a:before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: 100%;
	background-color:#008def;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);	
}

.job-social li a:hover:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    padding: 5px;
}

.job-social li a:hover {
	border-color: #fff;
}

.job-social li a:hover i {
	color: #fff;
}

.tr-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

Similar snippets

Find more similar snippets using the following tags:jobs,careers

React js template and ui example General Search Results

General Search Results

View
React js template and ui example Jobs Openings

Jobs Openings

View
React js template and ui example find jobs cards

find jobs cards

View
React js template and ui example job categories

job categories

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example Table user information

Table user information

View
React js template and ui example Form register inside narrow jumbotron

Form register inside narrow jumbotron

View
React js template and ui example profile gallery with search input

profile gallery with search input

View