FAQ middle of the section

Frequently ask Question with arrow

HTML

<section class="ezy__faq11">
  <div class="container">
    <div class="row justify-content-between position-relative">
      <div class="col-md-4 mb-4 mb-md-0">
        <div
          class="ezy__faq11-bg-holder h-100"
          style="background-image: url(https://cdn.easyfrontend.com/pictures/blog/blog_13_3.jpg)"
        ></div>
      </div>
      <div class="col-md-8 ps-lg-5 py-lg-5">
        <div class="ezy__faq11-list p-4">
          <div class="ezy__faq11-item">
            <a
              class="btn px-0 py-3 w-100 text-start d-flex justify-content-between align-items-center ezy__faq11-btn-collapse"
              data-bs-toggle="collapse"
              href="#ezy-faq11-collapse-1"
              role="button"
              aria-expanded="true"
              aria-controls="ezy-faq11-collapse-1"
            >
              <span>What is Easy Frontend?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="collapse show border-start border-3 border-warning mb-3" id="ezy-faq11-collapse-1">
              <div class="ezy__faq11-content px-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. 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 class="ezy__faq11-item">
            <a
              class="btn px-0 py-3 w-100 text-start d-flex justify-content-between align-items-center ezy__faq11-btn-collapse"
              data-bs-toggle="collapse"
              href="#ezy-faq11-collapse-2"
              role="button"
              aria-expanded="false"
              aria-controls="ezy-faq11-collapse-2"
            >
              <span>Who is Easy Frontend for?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="collapse border-start border-3 border-warning mb-3" id="ezy-faq11-collapse-2">
              <div class="ezy__faq11-content px-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. 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 class="ezy__faq11-item">
            <a
              class="btn px-0 py-3 w-100 text-start d-flex justify-content-between align-items-center ezy__faq11-btn-collapse"
              data-bs-toggle="collapse"
              href="#ezy-faq11-collapse-3"
              role="button"
              aria-expanded="false"
              aria-controls="ezy-faq11-collapse-3"
            >
              <span>How does Easy Frontend work?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="collapse border-start border-3 border-warning mb-3" id="ezy-faq11-collapse-3">
              <div class="ezy__faq11-content px-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. 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 class="ezy__faq11-item">
            <a
              class="btn px-0 py-3 w-100 text-start d-flex justify-content-between align-items-center ezy__faq11-btn-collapse"
              data-bs-toggle="collapse"
              href="#ezy-faq11-collapse-4"
              role="button"
              aria-expanded="false"
              aria-controls="ezy-faq11-collapse-4"
            >
              <span>How often does your team upload resources?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="collapse border-start border-3 border-warning mb-3" id="ezy-faq11-collapse-4">
              <div class="ezy__faq11-content px-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. 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 class="ezy__faq11-item">
            <a
              class="btn px-0 py-3 w-100 text-start d-flex justify-content-between align-items-center ezy__faq11-btn-collapse"
              data-bs-toggle="collapse"
              href="#ezy-faq11-collapse-2"
              role="button"
              aria-expanded="false"
              aria-controls="ezy-faq11-collapse-2"
            >
              <span>Who is Easy Frontend for?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="collapse border-start border-3 border-warning mb-3" id="ezy-faq11-collapse-2">
              <div class="ezy__faq11-content px-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. 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 class="ezy__faq11-item">
            <a
              class="btn px-0 py-3 w-100 text-start d-flex justify-content-between align-items-center ezy__faq11-btn-collapse"
              data-bs-toggle="collapse"
              href="#ezy-faq11-collapse-3"
              role="button"
              aria-expanded="false"
              aria-controls="ezy-faq11-collapse-3"
            >
              <span>How does Easy Frontend work?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="collapse border-start border-3 border-warning mb-3" id="ezy-faq11-collapse-3">
              <div class="ezy__faq11-content px-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. 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 class="ezy__faq11-item">
            <a
              class="btn px-0 py-3 w-100 text-start d-flex justify-content-between align-items-center ezy__faq11-btn-collapse"
              data-bs-toggle="collapse"
              href="#ezy-faq11-collapse-4"
              role="button"
              aria-expanded="false"
              aria-controls="ezy-faq11-collapse-4"
            >
              <span>How often does your team upload resources?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="collapse border-start border-3 border-warning mb-3" id="ezy-faq11-collapse-4">
              <div class="ezy__faq11-content px-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. 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>

          <button class="btn btn-outline-primary my-4">View All FAQ's</button>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.ezy__faq11 {
  /* 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: #ffffff;
  --ezy-item-shadow: 0px 4px 44px rgba(159, 190, 218, 0.37);

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

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

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

/* Dark Gray Block Style */
.dark-gray .ezy__faq11,
.ezy__faq11.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);
  --ezy-item-shadow: 0px 4px 22px rgba(0, 0, 0, 0.2);
}

/* Dark Block Style */
.dark .ezy__faq11,
.ezy__faq11.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-item-shadow: 0px 4px 22px rgba(0, 0, 0, 0.2);
}

.ezy__faq11-bg-holder {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 150px;
  width: 100%;
  border-radius: 15px;
}

@media (min-width: 768px) {
  .ezy__faq11-bg-holder {
    width: 100vw;
    float: right;
    margin-right: -150%;
  }
}

.ezy__faq11-list {
  background-color: var(--ezy-item-bg);
  box-shadow: var(--ezy-item-shadow);
  margin: 0;
}

@media (min-width: 768px) {
  .ezy__faq11-list {
    margin: 100px 0;
  }
}

.ezy__faq11-item * {
  color: var(--bs-body-color);
}

.ezy__faq11-btn-collapse [class*="fa-"] {
  transition: transform 0.25s ease-in-out;
}

.ezy__faq11-btn-collapse:focus {
  box-shadow: none;
}

.ezy__faq11-btn-collapse.active [class*="fa-"],
.ezy__faq11-btn-collapse[aria-expanded="true"] [class*="fa-"] {
  transform: rotate(-180deg);
}

.ezy__faq11 .border-warning {
  border-color: var(--ezy-theme-color) !important;
}

.ezy__faq11 .btn-outline-primary {
  padding: 11px 35px;
  border-color: var(--ezy-theme-color);
  color: var(--ezy-theme-color);
}

.ezy__faq11 .btn-outline-primary:hover {
  color: #fff;
  border-color: var(--ezy-theme-color);
  background-color: var(--ezy-theme-color);
}
</style>

Bootstrap

<section class="ezy__faq11 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 justify-between relative gap-6">
      <div class="col-span-12 md:col-span-4 col-md-4">
        <div
          class="bg-center bg-no-repeat bg-cover min-h-[150px] w-full rounded-2xl md:w-screen float-right -mr-[150px] h-full"
          style="background-image: url(https://cdn.easyfrontend.com/pictures/blog/blog_13_3.jpg)"
        ></div>
      </div>

      <div class="col-span-12 md:col-span-8 lg:pl-12 lg:py-12">
        <div class="bg-white shadow dark:shadow-none dark:bg-[#1E2735] p-6 md:my-24">
          <div>
            <a class="btn px-0 py-4 w-full text-start flex justify-between items-center">
              <span>What is Easy Frontend?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="active border-l-2 border-blue-600 mb-4">
              <div class="px-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. 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>
            <a class="btn px-0 py-4 w-full text-start flex justify-between items-center">
              <span>Who is Easy Frontend for?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="hidden border-l-2 border-blue-600 mb-4">
              <div class="px-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. 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>
            <a class="btn px-0 py-4 w-full text-start flex justify-between items-center">
              <span>How does Easy Frontend work?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="hidden border-l-2 border-blue-600 mb-4">
              <div class="px-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. 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>
            <a class="btn px-0 py-4 w-full text-start flex justify-between items-center">
              <span>How often does your team upload resources? </span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="hidden border-l-2 border-blue-600 mb-4">
              <div class="px-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. 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>
            <a class="btn px-0 py-4 w-full text-start flex justify-between items-center">
              <span>Who is Easy Frontend for?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="hidden border-l-2 border-blue-600 mb-4">
              <div class="px-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. 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>
            <a class="btn px-0 py-4 w-full text-start flex justify-between items-center">
              <span>How does Easy Frontend work?</span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="hidden border-l-2 border-blue-600 mb-4">
              <div class="px-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. 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>
            <a class="btn px-0 py-4 w-full text-start flex justify-between items-center">
              <span>How often does your team upload resources? </span>
              <span class="fas fa-chevron-down"></span>
            </a>
            <div class="hidden border-l-2 border-blue-600 mb-4">
              <div class="px-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. 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>

          <button
            class="bg-transparent hover:bg-blue-600 border border-blue-600 hover:text-white rounded transition py-3 px-9 my-6"
          >
            View All FAQ's
          </button>
        </div>
      </div>
    </div>
  </div>
</section>



Tailwind CSS

React JS

import React, { useState } from "react";
import { Button, Col, Collapse, Container, Row } from "react-bootstrap";
import classNames from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
import PropTypes from "prop-types";

const faqList = [
	{
		isActive: true,
		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. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		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. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		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. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "How often does your team upload resources?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I get a refund if I cancel my subscription?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I use Easy Frontend designs in my portfolio?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I buy Easy Frontend extended license?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
];

const FaqItem = ({ faq }) => {
	const [isOpen, setIsOpen] = useState(faq.isActive || false);

	const toggleFaq = () => setIsOpen(!isOpen);

	return (
		<div className="ezy__faq11-item">
			<Button
				variant=""
				className={classNames(
					"px-0 py-3 w-100 text-start d-flex justify-content-between align-items-center ezy__faq11-btn-collapse",
					{ active: isOpen }
				)}
				type="button"
				onClick={toggleFaq}
			>
				<span>{faq.question}</span>
				<FontAwesomeIcon icon={faChevronDown} />
			</Button>
			<Collapse in={isOpen}>
				<div className="border-start border-3 border-warning mb-3">
					<div className="ezy__faq11-content px-4">
						<p className="opacity-50 mb-0">{faq.answer}</p>
					</div>
				</div>
			</Collapse>
		</div>
	);
};

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

const Faq11 = () => {
	return (
		<section className="ezy__faq11">
			<Container>
				<Row className="justify-content-between position-relative">
					<Col md={4} className="mb-4 mb-md-0">
						<div
							className="ezy__faq11-bg-holder h-100"
							style={{
								backgroundImage:
									"url(https://cdn.easyfrontend.com/pictures/blog/blog_13_3.jpg)",
							}}
						/>
					</Col>
					<Col md={8} className="ps-lg-5 py-lg-5">
						<div className="ezy__faq11-list p-4">
							{faqList.map((faq, i) => (
								<FaqItem faq={faq} key={i} />
							))}

							<Button variant="outline-primary" className="my-4">
								View All FAQ's
							</Button>
						</div>
					</Col>
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__faq11 {
	/* 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: #ffffff;
	--ezy-item-shadow: 0px 4px 44px rgba(159, 190, 218, 0.37);

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

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

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

/* Dark Gray Block Style */
.dark-gray .ezy__faq11,
.ezy__faq11.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);
	--ezy-item-shadow: 0px 4px 22px rgba(0, 0, 0, 0.2);
}

/* Dark Block Style */
.dark .ezy__faq11,
.ezy__faq11.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-item-shadow: 0px 4px 22px rgba(0, 0, 0, 0.2);
}

.ezy__faq11-bg-holder {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 150px;
	width: 100%;
	border-radius: 15px;
}

@media (min-width: 768px) {
	.ezy__faq11-bg-holder {
		width: 100vw;
		float: right;
		margin-right: -150%;
	}
}

.ezy__faq11-list {
	background-color: var(--ezy-item-bg);
	box-shadow: var(--ezy-item-shadow);
	margin: 0;
}

@media (min-width: 768px) {
	.ezy__faq11-list {
		margin: 100px 0;
	}
}

.ezy__faq11-item * {
	color: var(--bs-body-color);
}

.ezy__faq11-btn-collapse [class*="fa-"] {
	transition: transform 0.25s ease-in-out;
}

.ezy__faq11-btn-collapse:focus {
	box-shadow: none;
}

.ezy__faq11-btn-collapse.active [class*="fa-"],
.ezy__faq11-btn-collapse[aria-expanded="true"] [class*="fa-"] {
	transform: rotate(-180deg);
}

.ezy__faq11 .border-warning {
	border-color: var(--ezy-theme-color) !important;
}

.ezy__faq11 .btn-outline-primary {
	padding: 11px 35px;
	border-color: var(--ezy-theme-color);
	color: var(--ezy-theme-color);
}

.ezy__faq11 .btn-outline-primary:hover {
	color: #fff;
	border-color: var(--ezy-theme-color);
	background-color: var(--ezy-theme-color);
}
</style>

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
import PropTypes from "prop-types";

const faqList = [
	{
		isActive: true,
		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. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		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. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		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. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "How often does your team upload resources?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I get a refund if I cancel my subscription?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I use Easy Frontend designs in my portfolio?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
	{
		isActive: false,
		question: "Can I buy Easy Frontend extended license?",
		answer:
			"When it comes to booking a holiday, we know everyone likes something different - so we've designed our getaways with you in mind. When it comes to booking a holiday, we know everyone likes something different.",
	},
];

const FaqItem = ({ faq }) => {
	const [isOpen, setIsOpen] = useState(faq.isActive || false);

	const toggleFaq = () => setIsOpen(!isOpen);

	return (
		<div className={isOpen && "active"}>
			<a
				href="#!"
				className="btn px-0 py-4 w-full text-start flex justify-between items-center"
				onClick={toggleFaq}
			>
				<span>{faq.question}</span>
				<FontAwesomeIcon icon={isOpen ? faChevronUp : faChevronDown} />
			</a>
			<div
				className={`${
					isOpen ? "block" : "hidden"
				} border-l-2 border-blue-600 mb-4`}
			>
				<div className="px-6">
					<p className="opacity-50">{faq.answer}</p>
				</div>
			</div>
		</div>
	);
};

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

const Faq11 = () => {
	return (
		<section className="ezy__faq11 py-14 md:py-24 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white">
			<div className="container px-16 md:px-8 lg:px-28">
				<div className="grid grid-cols-12 justify-between relative gap-6">
					<div className="col-span-12 md:col-span-4 col-md-4">
						<div
							className="bg-center bg-no-repeat bg-cover min-h-[150px] w-full rounded-2xl md:w-screen float-right -mr-[150px] h-full"
							style={{
								backgroundImage:
									"url(https://cdn.easyfrontend.com/pictures/blog/blog_13_3.jpg)",
							}}
						></div>
					</div>

					<div className="col-span-12 md:col-span-8 lg:pl-12 lg:py-12">
						<div className="bg-white shadow dark:shadow-none dark:bg-[#1E2735] p-6 md:my-24">
							{faqList.map((faq, i) => (
								<FaqItem faq={faq} key={i} />
							))}

							<button className="bg-transparent hover:bg-blue-600 border border-blue-600 hover:text-white rounded transition py-3 px-9 my-6">
								View All FAQ's
							</button>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};



FAQ #11Creative FAQ section with image

Available resources

Share with

Tags

You may also like