FAQ arrow ups and down with image.

Frequently ask Question with arrow

HTML

<section class="ezy__faq9">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mb-5">
        <h2 class="ezy__faq9-heading mb-4">Frequently Asked Questions</h2>
        <p class="ezy__faq9-sub-heading mb-0">
          Assumenda non repellendus distinctio nihil dicta sapiente, quibusdam maiores, illum at, aliquid blanditiis
          eligendi qui.Assumenda non repellendus distinctio nihil dicta sapiente, quibusdam maiores
        </p>
      </div>
    </div>
    <div class="row justify-content-between">
      <div class="col-md-4 mb-4 mb-md-0">
        <div class="ezy__faq10-bg-holder h-100"
          style="background-image: url(https://cdn.easyfrontend.com/pictures/sign-in-up/sign-in-up-2.png)"></div>
      </div>
      <div class="col-md-8 ps-lg-5">
        <div class="ezy__faq9-item">
          <h5
            class="p-3 p-lg-4 mb-0 w-100 text-start d-flex justify-content-between align-items-center ezy__faq9-btn-collapse">
            <span>What is Easy Frontend?</span>
          </h5>
          <div class="ezy__faq9-content px-3 px-lg-4 pb-lg-4">
            <p class="opacity-50 mb-0">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
        <div class="ezy__faq9-item">
          <h5
            class="p-3 p-lg-4 mb-0 w-100 text-start d-flex justify-content-between align-items-center ezy__faq9-btn-collapse">
            <span>Who is Easy Frontend for?</span>
          </h5>
          <div class="ezy__faq9-content px-3 px-lg-4 pb-lg-4">
            <p class="opacity-50 mb-0">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
        <div class="ezy__faq9-item">
          <h5
            class="p-3 p-lg-4 mb-0 w-100 text-start d-flex justify-content-between align-items-center ezy__faq9-btn-collapse">
            <span>How does Easy Frontend work?</span>
          </h5>
          <div class="ezy__faq9-content px-3 px-lg-4 pb-lg-4">
            <p class="opacity-50 mb-0">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
        <div class="ezy__faq9-item">
          <h5
            class="p-3 p-lg-4 mb-0 w-100 text-start d-flex justify-content-between align-items-center ezy__faq9-btn-collapse">
            <span>Who is Easy Frontend for?</span>
          </h5>
          <div class="ezy__faq9-content px-3 px-lg-4 pb-lg-4">
            <p class="opacity-50 mb-0">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
        <div class="ezy__faq9-item">
          <h5
            class="p-3 p-lg-4 mb-0 w-100 text-start d-flex justify-content-between align-items-center ezy__faq9-btn-collapse">
            <span>How does Easy Frontend work?</span>
          </h5>
          <div class="ezy__faq9-content px-3 px-lg-4 pb-lg-4">
            <p class="opacity-50 mb-0">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.ezy__faq9 {
  /* Bootstrap variables */
  --bs-body-color: #28303b;
  --bs-body-bg: rgb(255, 255, 255);

  /* Easy Frontend variables */
  --ezy-theme-color: rgb(13, 110, 253);
  --ezy-theme-color-rgb: 13, 110, 253;
  --ezy-item-bg: #f9f9fa;

  background-color: var(--bs-body-bg);
  overflow: hidden;
  padding: 60px 0;
}

@media (min-width: 768px) {
  .ezy__faq9 {
    padding: 100px 0;
  }
}

/* Gray Block Style */
.gray .ezy__faq9,
.ezy__faq9.gray {
  /* Bootstrap variables */
  --bs-body-bg: rgb(246, 246, 246);

  /* Easy Frontend variables */
  --ezy-item-bg: #fff;
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq9,
.ezy__faq9.dark-gray {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(30, 39, 53);

  /* Easy Frontend variables */
  --ezy-item-bg: rgb(11, 23, 39);
}

/* Dark Block Style */
.dark .ezy__faq9,
.ezy__faq9.dark {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(11, 23, 39);

  /* Easy Frontend variables */
  --ezy-item-bg: rgb(30, 39, 53);
}

.ezy__faq9-heading {
  font-weight: bold;
  font-size: 25px;
  line-height: 25px;
  color: var(--bs-body-color);
}

@media (min-width: 768px) {
  .ezy__faq9-heading {
    font-size: 45px;
    line-height: 45px;
  }
}

.ezy__faq9-sub-heading {
  font-size: 18px;
  line-height: 30px;
  color: var(--bs-body-color);
  opacity: 0.7;
}

.ezy__faq9-item {
  background-color: var(--ezy-item-bg);
  margin-bottom: 1px;
}

.ezy__faq9-item * {
  color: var(--bs-body-color);
}
</style>

Bootstrap

<section class="ezy__faq9 py-14 md:py-24 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white">
  <div class="container px-16 md:px-8 lg:px-28">
    <div class="grid grid-cols-12">
      <div class="col-span-12 lg:col-span-8 mb-12">
        <h2 class="font-bold text-[25px] md:text-[45px] leading-none mb-6">Frequently Asked Questions</h2>
        <p class="text-lg opacity-70">
          Assumenda non repellendus distinctio nihil dicta sapiente, quibusdam maiores, illum at, aliquid blanditiis
          eligendi qui.Assumenda non repellendus distinctio nihil dicta sapiente, quibusdam maiores.
        </p>
      </div>
    </div>

    <div class="grid grid-cols-12 gap-6 justify-between">
      <div class="col-span-12 md:col-span-4 mb-6 md:mb-0">
        <div
          class="bg-center bg-no-repeat bg-cover min-h-[150px] w-full rounded-2xl h-full"
          style="background-image: url(https://cdn.easyfrontend.com/pictures/sign-in-up/sign-in-up-2.png)"
        ></div>
      </div>
      <div class="col-span-12 md:col-span-8 lg:pl-12">
        <div class="bg-gray-100 dark:bg-[#1E2735] mb-[1px]">
          <h5 class="p-4 lg:p-6 mb-0 w-full text-start flex justify-between items-center text-xl font-medium">
            <span>What is Easy Frontend?</span>
          </h5>
          <div class="px-3 lg:px-6 lg:pb-6">
            <p class="opacity-50">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] mb-[1px]">
          <h5 class="p-4 lg:p-6 mb-0 w-full text-start flex justify-between items-center text-xl font-medium">
            <span>Who is Easy Frontend for?</span>
          </h5>
          <div class="px-3 lg:px-6 lg:pb-6">
            <p class="opacity-50">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] mb-[1px]">
          <h5 class="p-4 lg:p-6 mb-0 w-full text-start flex justify-between items-center text-xl font-medium">
            <span>How does Easy Frontend work?</span>
          </h5>
          <div class="px-3 lg:px-6 lg:pb-6">
            <p class="opacity-50">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] mb-[1px]">
          <h5 class="p-4 lg:p-6 mb-0 w-full text-start flex justify-between items-center text-xl font-medium">
            <span>What is Easy Frontend?</span>
          </h5>
          <div class="px-3 lg:px-6 lg:pb-6">
            <p class="opacity-50">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] mb-[1px]">
          <h5 class="p-4 lg:p-6 mb-0 w-full text-start flex justify-between items-center text-xl font-medium">
            <span>Who is Easy Frontend for?</span>
          </h5>
          <div class="px-3 lg:px-6 lg:pb-6">
            <p class="opacity-50">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-[#1E2735] mb-[1px]">
          <h5 class="p-4 lg:p-6 mb-0 w-full text-start flex justify-between items-center text-xl font-medium">
            <span>How does Easy Frontend work?</span>
          </h5>
          <div class="px-3 lg:px-6 lg:pb-6">
            <p class="opacity-50">
              When it comes to booking a holiday, we know everyone likes something different - so we've designed our
              getaways with you in mind.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



Tailwind CSS

React JS

import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import PropTypes from "prop-types";

const faqList = [
	{
		question: "What is Easy Frontend?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
	{
		question: "Who is Easy Frontend for?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
	{
		question: "How does Easy Frontend work?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
	{
		question: "Who is Easy Frontend for?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
	{
		question: "How does Easy Frontend work?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
];

const FaqItem = ({ faq }) => (
	<div className="ezy__faq9-item">
		<h5 className="p-3 p-lg-4 mb-0 w-100 text-start d-flex justify-content-between align-items-center ezy__faq9-btn-collapse">
			<span>{faq.question}</span>
		</h5>
		<div className="ezy__faq9-content px-3 px-lg-4 pb-lg-4">
			<p className="opacity-50 mb-0">{faq.answer}</p>
		</div>
	</div>
);

FaqItem.propTypes = {
	faq: PropTypes.object.isRequired,
};

const Faq9 = () => {
	return (
		<section className="ezy__faq9">
			<Container>
				<Row>
					<Col lg={8} className="mb-5">
						<h2 className="ezy__faq9-heading mb-4">
							Frequently Asked Questions
						</h2>
						<p className="ezy__faq9-sub-heading mb-0">
							Assumenda non repellendus distinctio nihil dicta sapiente,
							quibusdam maiores, illum at, aliquid blanditiis eligendi
							qui.Assumenda non repellendus distinctio nihil dicta sapiente,
							quibusdam maiores
						</p>
					</Col>
				</Row>
				<Row className="justify-content-between">
					<Col md={4} className="mb-4 mb-md-0">
						<div
							className="ezy__faq10-bg-holder h-100"
							style={{
								backgroundImage:
									"url(https://cdn.easyfrontend.com/pictures/sign-in-up/sign-in-up-2.png)",
							}}
						/>
					</Col>
					<Col md={8} className="ps-lg-5">
						{faqList.map((faq, i) => (
							<FaqItem faq={faq} key={i} />
						))}
					</Col>
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__faq9 {
	/* Bootstrap variables */
	--bs-body-color: #28303b;
	--bs-body-bg: rgb(255, 255, 255);

	/* Easy Frontend variables */
	--ezy-theme-color: rgb(13, 110, 253);
	--ezy-theme-color-rgb: 13, 110, 253;
	--ezy-item-bg: #f9f9fa;

	background-color: var(--bs-body-bg);
	overflow: hidden;
	padding: 60px 0;
}

@media (min-width: 768px) {
	.ezy__faq9 {
		padding: 100px 0;
	}
}

/* Gray Block Style */
.gray .ezy__faq9,
.ezy__faq9.gray {
	/* Bootstrap variables */
	--bs-body-bg: rgb(246, 246, 246);

	/* Easy Frontend variables */
	--ezy-item-bg: #fff;
}

/* Dark Gray Block Style */
.dark-gray .ezy__faq9,
.ezy__faq9.dark-gray {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(30, 39, 53);

	/* Easy Frontend variables */
	--ezy-item-bg: rgb(11, 23, 39);
}

/* Dark Block Style */
.dark .ezy__faq9,
.ezy__faq9.dark {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(11, 23, 39);

	/* Easy Frontend variables */
	--ezy-item-bg: rgb(30, 39, 53);
}

.ezy__faq9-heading {
	font-weight: bold;
	font-size: 25px;
	line-height: 25px;
	color: var(--bs-body-color);
}

@media (min-width: 768px) {
	.ezy__faq9-heading {
		font-size: 45px;
		line-height: 45px;
	}
}

.ezy__faq9-sub-heading {
	font-size: 18px;
	line-height: 30px;
	color: var(--bs-body-color);
	opacity: 0.7;
}

.ezy__faq9-item {
	background-color: var(--ezy-item-bg);
	margin-bottom: 1px;
}

.ezy__faq9-item * {
	color: var(--bs-body-color);
}
</style>

import React from "react";
import PropTypes from "prop-types";

const faqList = [
	{
		question: "What is Easy Frontend?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
	{
		question: "Who is Easy Frontend for?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
	{
		question: "How does Easy Frontend work?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
	{
		question: "Who is Easy Frontend for?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
	{
		question: "How does Easy Frontend work?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind.",
	},
];

const FaqItem = ({ faq }) => (
	<div className="bg-gray-100 dark:bg-[#1E2735] mb-[1px]">
		<h5 className="p-4 lg:p-6 mb-0 w-full text-start flex justify-between items-center text-xl font-medium">
			<span>{faq.question}</span>
		</h5>
		<div className="px-3 lg:px-6 lg:pb-6">
			<p className="opacity-50">{faq.answer}</p>
		</div>
	</div>
);

FaqItem.propTypes = {
	faq: PropTypes.object.isRequired,
};

const Faq9 = () => {
	return (
		<section className="ezy__faq9 py-14 md:py-24 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white">
			<div className="container px-4 mx-auto">
				<div className="grid grid-cols-12 max-w-7xl mx-auto">
					<div className="col-span-12 lg:col-span-8 mb-12">
						<h2 className="font-bold text-[25px] md:text-[45px] leading-none mb-6">
							Frequently Asked Questions
						</h2>
						<p className="text-lg opacity-70">
							Assumenda non repellendus distinctio nihil dicta sapiente,
							quibusdam maiores, illum at, aliquid blanditiis eligendi
							qui.Assumenda non repellendus distinctio nihil dicta sapiente,
							quibusdam maiores.
						</p>
					</div>
				</div>

				<div className="grid grid-cols-12 gap-6 justify-between max-w-7xl mx-auto">
					<div className="col-span-12 md:col-span-4 mb-6 md:mb-0">
						<div
							className="bg-center bg-no-repeat bg-cover min-h-[150px] w-full rounded-2xl h-full"
							style={{
								backgroundImage:
									"url(https://cdn.easyfrontend.com/pictures/sign-in-up/sign-in-up-2.png)",
							}}
						></div>
					</div>
					<div className="col-span-12 md:col-span-8 lg:pl-12">
						{faqList.map((faq, i) => (
							<FaqItem faq={faq} key={i} />
						))}
					</div>
				</div>
			</div>
		</section>
	);
};



FAQ #9FAQ with side image

Available resources

Share with

Tags

You may also like