Rich-React

React js UI example. faqs page

React js UI example and template, faqs page! . 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: faqs

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>
			<div class="container">
<div class="row">
	<div class="col-md-3">

		
		
		<div class="mar-btm">
			<h4 class="text-thin"><i class="fa fa-lightbulb-o fa-lg fa-fw text-warning"></i> Useful tips</h4>
			<p class="text-muted mar-top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			<div class="list-group bg-trans">
				<a class="list-group-item" href="#/"><span class="badge badge-purple badge-icon badge-fw pull-left"></span> Lorem ipsum</a>
				<a class="list-group-item" href="#/"><span class="badge badge-info badge-icon badge-fw pull-left"></span> Consectetuer adipiscing</a>
				<a class="list-group-item" href="#/"><span class="badge badge-pink badge-icon badge-fw pull-left"></span> Sed diam nonummy</a>
				<a class="list-group-item" href="#/"><span class="badge badge-success badge-icon badge-fw pull-left"></span> Euismod tincidunt</a>
			</div>
		</div>
		

		<hr/>

		
		
		<div class="mar-btm">
			<h4 class="text-thin"><i class="fa fa-question-circle fa-lg fa-fw text-primary"></i> Can't find the answer? </h4>
			<p class="text-muted mar-top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			<a href="#/" class="btn btn-primary">Contact us</a>
		</div>
		

	</div>
	<div class="col-md-9">
		<div class="panel">
			<div class="panel-body">

				
				
				<h3 class="pad-all bord-btm text-thin">General</h3>
				<div id="demo-gen-faq" class="panel-group accordion">
					<div class="bord-no pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-gen-faq1" data-toggle="collapse" data-parent="#demo-gen-faq">Lorem ipsum dolor sit amet ?</a>
						</div>

						
						<div id="demo-gen-faq1" class="collapse in">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="bord-no pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-gen-faq2" data-toggle="collapse" data-parent="#demo-gen-faq">Consectetuer adipiscing elit ?</a>
						</div>

						
						<div id="demo-gen-faq2" class="collapse in">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="bord-no pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-gen-faq3" data-toggle="collapse" data-parent="#demo-gen-faq">Sed diam nonummy nibh euismod tincidunt ?</a>
						</div>

						
						<div id="demo-gen-faq3" class="collapse">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="bord-no pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-gen-faq4" data-toggle="collapse" data-parent="#demo-gen-faq">Tincidunt ut laoreet dolore magna ?</a>
						</div>


						
						<div id="demo-gen-faq4" class="collapse">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
				</div>
				

				<hr class="bord-no pad-all"/>

				
				
				<h3 class="pad-all bord-btm text-thin">Account</h3>
				<div id="demo-acc-faq" class="panel-group accordion">
					<div class="panel panel-trans pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-acc-faq1" data-toggle="collapse" data-parent="#demo-acc-faq">Lorem ipsum dolor sit amet ?</a>
						</div>


						
						<div id="demo-acc-faq1" class="collapse in">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="panel panel-trans pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-acc-faq2" data-toggle="collapse" data-parent="#demo-acc-faq">Consectetuer adipiscing elit ?</a>
						</div>

						
						<div id="demo-acc-faq2" class="collapse">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="panel panel-trans pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-acc-faq3" data-toggle="collapse" data-parent="#demo-acc-faq">Sed diam nonummy nibh euismod tincidunt ?</a>
						</div>

						
						<div id="demo-acc-faq3" class="collapse">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
				</div>
				

				<hr class="bord-no pad-all"/>

				
				
				<h3 class="pad-all bord-btm text-thin">Payment</h3>
				<div id="demo-pym-faq" class="panel-group accordion">
					<div class="bord-no pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-pym-faq1" data-toggle="collapse" data-parent="#demo-pym-faq">Lorem ipsum dolor sit amet ?</a>
						</div>


						
						<div id="demo-pym-faq1" class="collapse in">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="bord-no pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-pym-faq2" data-toggle="collapse" data-parent="#demo-pym-faq">Consectetuer adipiscing elit ?</a>
						</div>

						
						<div id="demo-pym-faq2" class="collapse in">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="bord-no pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-pym-faq3" data-toggle="collapse" data-parent="#demo-pym-faq">Sed diam nonummy nibh euismod tincidunt ?</a>
						</div>


						
						<div id="demo-pym-faq3" class="collapse in">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</div>
						</div>
					</div>
					<div class="bord-no pad-top">

						
						<div class="text-semibold pad-hor text-lg">
							<a href="#demo-pym-faq4" data-toggle="collapse" data-parent="#demo-pym-faq">Tincidunt ut laoreet dolore magna ?</a>
						</div>


						
						<div id="demo-pym-faq4" class="collapse in">
							<div class="pad-all">
								Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
							</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{margin-top:20px;
background:#eee;
}

.mar-btm {
    margin-bottom: 15px
}


.list-group.bg-trans .list-group-item:not(.active):not(.disabled) {
    background-color: transparent;
    border-color: transparent;
    color: inherit
}

.list-group.bg-trans .list-group-item .disabled {
    opacity: .5
}

.list-group.bg-trans a.list-group-item:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.05)
}

.list-group.bord-no .list-group-item {
    border-color: transparent
}

.list-group .list-divider {
    display: block
}

.list-group-item {
    border-color: #e9e9e9
}

.list-group-item-heading {
    margin-top: 5px
}

.list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.list-group-item:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.list-group-item .list-group-item.disabled,
.list-group-item .list-group-item.disabled:hover,
.list-group-item .list-group-item.disabled:focus {
    background-color: rgba(0, 0, 0, 0.07);
    border-color: transparent
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: #54abd9;
    border-color: #54abd9;
    color: #fff
}

.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
    color: #fff
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: rgba(0, 0, 0, 0.05)
}

a.list-group-item-primary,
.list-group-item-primary {
    background-color: #7cb3e3;
    border-color: transparent;
    color: #fff
}

a.list-group-item-primary:hover,
a.list-group-item-primary:focus {
    background-color: #89bae6;
    color: #fff
}

a.list-group-item-info,
.list-group-item-info {
    background-color: #64c6e2;
    border-color: transparent;
    color: #fff
}

a.list-group-item-info:hover,
a.list-group-item-info:focus {
    background-color: #71cbe4;
    color: #fff
}

a.list-group-item-success,
.list-group-item-success {
    background-color: #a3d272;
    border-color: transparent;
    color: #fff
}

a.list-group-item-success:hover,
a.list-group-item-success:focus {
    background-color: #aad57e;
    color: #fff
}

a.list-group-item-warning,
.list-group-item-warning {
    background-color: #f3b961;
    border-color: transparent;
    color: #fff
}

a.list-group-item-warning:hover,
a.list-group-item-warning:focus {
    background-color: #f4bf70;
    color: #fff
}

a.list-group-item-danger,
.list-group-item-danger {
    background-color: #f9826b;
    border-color: transparent;
    color: #fff
}

a.list-group-item-danger:hover,
a.list-group-item-danger:focus {
    background-color: #f98e7a;
    color: #fff
}

a.list-group-item-mint,
.list-group-item-mint {
    background-color: #5ed4b2;
    border-color: transparent;
    color: #fff
}

a.list-group-item-mint:hover,
a.list-group-item-mint:focus {
    background-color: #6ad7b8;
    color: #fff
}

a.list-group-item-purple,
.list-group-item-purple {
    background-color: #af69a4;
    border-color: transparent;
    color: #fff
}

a.list-group-item-purple:hover,
a.list-group-item-purple:focus {
    background-color: #b473aa;
    color: #fff
}

a.list-group-item-pink,
.list-group-item-pink {
    background-color: #e899bb;
    border-color: transparent;
    color: #fff
}

a.list-group-item-pink:hover,
a.list-group-item-pink:focus {
    background-color: #eba5c3;
    color: #fff
}

a.list-group-item-dark,
.list-group-item-dark {
    background-color: #44494d;
    border-color: transparent;
    color: #fff
}

a.list-group-item-dark:hover,
a.list-group-item-dark:focus {
    background-color: #4b5155;
    color: #fff
}


.badge:empty.badge-icon {
    display: inline-block;
    width: .7em;
    height: .7em;
    padding: 0;
    min-width: 5px;
    margin: .5em;
    border-radius: 50%
}

.badge.badge-fw,
.badge:empty.badge-fw {
    margin-right: 1em
}

.badge-default {
    background-color: #e3e8ee;
    color: #333
}

.badge-primary {
    background-color: #5fa2dd
}

.badge-info {
    background-color: #46bbdc
}

.badge-success {
    background-color: #91c957
}

.badge-warning {
    background-color: #f1aa40
}

.badge-danger {
    background-color: #f76549
}

.badge-mint {
    background-color: #42cca5
}

.badge-purple {
    background-color: #9f5594
}

.badge-pink {
    background-color: #e17ca7
}

.badge-dark {
    background-color: #33373a
}

.pad-all {
    padding: 15px;
}
.text-thin {
    font-weight: 300;
}
.bord-btm {
    border-bottom: 1px solid #e9e9e9;
}

Similar snippets

Find more similar snippets using the following tags:faqs

React js template and ui example Frequently Asked Questions

Frequently Asked Questions

View
React js template and ui example Faqs frequently asked questions with tabs

Faqs frequently asked questions with tabs

View
React js template and ui example support topic and categories

support topic and categories

View
React js template and ui example Support center

Support center

View
React js template and ui example bs5 dark footer

bs5 dark footer

View
React js template and ui example profile with data and skills

profile with data and skills

View
React js template and ui example Chat box

Chat box

View
React js template and ui example chat app

chat app

View