Right align FAQ list content

Frequently ask Question with arrow

HTML

<section class="ezy__faq14" id="ezy__faq14">
  <div class="container">
    <div class="row">
      
      <div class="col-12 text-center text-sm-start">
        <h2 class="ezy__faq14-heading mb-0">Frequently Asked Questions</h2>
        <p class="ezy__faq14-sub-heading ms-sm-4">SOLVE YOUR PROBLEM.</p>
      </div>
      
    </div>

    <div class="row text-center text-md-start">
      <div class="col-12 col-md-6 col-lg-4 mt-4 mt-md-5 pe-sm-4 pe-lg-5">
        <div class="ezy__faq14-item">
          <h3 class="ezy__faq14-item-title">How hard developing a strategy is?</h3>
          
          <p class="mb-0 mt-3 mt-md-4">
            
            Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax
            services range from discrete, one-time advice to complete.
          </p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 mt-4 mt-md-5 pe-sm-4 pe-lg-5">
        <div class="ezy__faq14-item">
          <h3 class="ezy__faq14-item-title">How do I change my password?</h3>
          
          <p class="mb-0 mt-3 mt-md-4">
            
            Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax
            services range from discrete, one-time advice to complete.
          </p>
        </div>
      </div>
      
      <div class="col-12 col-md-6 col-lg-4 mt-4 mt-md-5 pe-sm-4 pe-lg-5">
        <div class="ezy__faq14-item">
          <h3 class="ezy__faq14-item-title">How hard developing a strategy is?</h3>
          
          <p class="mb-0 mt-3 mt-md-4">
            
            Partner removes the hassle and confusion that comes from managing your tax burden.
          </p>
          <button class="btn btn-outline-light mt-3">Read More</button>
        </div>
      </div>
      
      <div class="col-12 col-md-6 col-lg-4 mt-4 mt-md-5 pe-sm-4 pe-lg-5">
        <div class="ezy__faq14-item">
          <h3 class="ezy__faq14-item-title">How do I change my password?</h3>
          
          <p class="mb-0 mt-3 mt-md-4">
            
            Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax
            services range from discrete, one-time advice to complete.
          </p>
        </div>
      </div>
      
      <div class="col-12 col-md-6 col-lg-4 mt-4 mt-md-5 pe-sm-4 pe-lg-5">
        <div class="ezy__faq14-item">
          <h3 class="ezy__faq14-item-title">How hard developing a strategy is?</h3>
          
          <p class="mb-0 mt-3 mt-md-4">
            
            Partner removes the hassle and confusion that comes from managing your tax burden.
          </p>
          <button class="btn btn-outline-light mt-3">Read More</button>
        </div>
      </div>
      
      <div class="col-12 col-md-6 col-lg-4 mt-4 mt-md-5 pe-sm-4 pe-lg-5">
        <div class="ezy__faq14-item">
          <h3 class="ezy__faq14-item-title">How hard developing a strategy is?</h3>
          
          <p class="mb-0 mt-3 mt-md-4">
            Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax
            services range from discrete, one-time advice to complete.
          </p>
        </div>
      </div>
      
    </div>
    
  </div>
  
</section>

<style>
.ezy__faq14 {
  /* 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);
  --ezy-rating-rgb: 255, 215, 0;

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

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

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

/* Dark Gray Block Style */
.dark-gray .ezy__faq14,
.ezy__faq14.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: none;
}

/* Dark Block Style */
.dark .ezy__faq14,
.ezy__faq14.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: none;
}

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

@media (min-width: 768px) {
  .ezy__faq14-heading {
    font-size: 50px;
    line-height: 70px;
  }
}

.ezy__faq14-sub-heading {
  font-size: 14px;
  line-height: 28px;
  color: var(--bs-body-color);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.9;
}

.ezy__faq14-item p {
  color: var(--bs-body-color);
  font-size: 15px;
  line-height: 25px;
  font-weight: 300;
  letter-spacing: 1px;
  opacity: 0.7;
}

.ezy__faq14-item [class*="fa-"] {
  color: var(--bs-body-color);
  font-size: 80px;
  opacity: 0.5;
}

.ezy__faq14-item-title {
  color: var(--bs-body-color);
  font-size: 29px;
  line-height: 30px;
  font-weight: 400;
}

.ezy__faq14 .btn-outline-light {
  color: var(--bs-body-color);
  border-color: rgba(163, 190, 241, 0.24);
}

.ezy__faq14 .btn-outline-light:hover {
  color: var(--bs-body-bg);
  background-color: var(--bs-body-color);
}
</style>

Bootstrap

<section class="ezy__faq14 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 text-center sm:text-start">
        <h2 class="font-bold text-[35px] leading-[45px] md:text-[50px] md:leading-[70px]">
          Frequently Asked Questions
        </h2>
        <p class="text-sm leading-7 tracking-[2px] opacity-90 sm:ml-6">SOLVE YOUR PROBLEM.</p>
      </div>
    </div>

    <div class="grid grid-cols-12 text-center md:text-start gap-6 mt-12">
      <div class="col-span-12 md:col-span-6 lg:col-span-4 sm:pr-6 lg:pr-12">
        <div class="ezy__faq14-item">
          <h3 class="text-[29px] leading-none">How hard developing a strategy is?</h3>
          <p class="text-[15px] leading-6 font-light tracking-[1px] opacity-70 mt-4 md:mt-6">
            Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax
            services range from discrete, one-time advice to complete.
          </p>
        </div>
      </div>
      <div class="col-span-12 md:col-span-6 lg:col-span-4 sm:pr-6 lg:pr-12">
        <div class="ezy__faq14-item">
          <h3 class="text-[29px] leading-none">How do I change my password?</h3>
          <p class="text-[15px] leading-6 font-light tracking-[1px] opacity-70 mt-4 md:mt-6">
            Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax
            services range from discrete, one-time advice to complete.
          </p>
        </div>
      </div>
      <div class="col-span-12 md:col-span-6 lg:col-span-4 sm:pr-6 lg:pr-12">
        <div class="ezy__faq14-item">
          <h3 class="text-[29px] leading-none">How hard developing a strategy is?</h3>
          <p class="text-[15px] leading-6 font-light tracking-[1px] opacity-70 mt-4 md:mt-6">
            Partner removes the hassle and confusion that comes from managing your tax burden.
          </p>
          <button
            class="rounded border border-gray-200 dark:border-gray-600 hover:bg-neutral-800 hover:text-white px-4 py-2 mt-4"
          >
            Read More
          </button>
        </div>
      </div>
      <div class="col-span-12 md:col-span-6 lg:col-span-4 sm:pr-6 lg:pr-12">
        <div class="ezy__faq14-item">
          <h3 class="text-[29px] leading-none">How do I change my password?</h3>
          <p class="text-[15px] leading-6 font-light tracking-[1px] opacity-70 mt-4 md:mt-6">
            Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax
            services range from discrete, one-time advice to complete.
          </p>
        </div>
      </div>
      <div class="col-span-12 md:col-span-6 lg:col-span-4 sm:pr-6 lg:pr-12">
        <div class="ezy__faq14-item">
          <h3 class="text-[29px] leading-none">How hard developing a strategy is?</h3>
          <p class="text-[15px] leading-6 font-light tracking-[1px] opacity-70 mt-4 md:mt-6">
            Partner removes the hassle and confusion that comes from managing your tax burden.
          </p>
          <button
            class="rounded border border-gray-200 dark:border-gray-600 hover:bg-neutral-800 hover:text-white px-4 py-2 mt-4"
          >
            Read More
          </button>
        </div>
      </div>
      <div class="col-span-12 md:col-span-6 lg:col-span-4 sm:pr-6 lg:pr-12">
        <div class="ezy__faq14-item">
          <h3 class="text-[29px] leading-none">How hard developing a strategy is?</h3>
          <p class="text-[15px] leading-6 font-light tracking-[1px] opacity-70 mt-4 md:mt-6">
            Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax
            services range from discrete, one-time advice to complete.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>



Tailwind CSS

React JS

import React from "react";
import { Button, Col, Container, Row } from "react-bootstrap";

const faqList = [
	{
		question: "How hard developing a strategy is?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax services range from discrete, one-time advice to complete.",
	},
	{
		question: "How do I change my password?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax services range from discrete, one-time advice to complete.",
	},
	{
		question: "How hard developing a strategy is?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden.",
		link: "!#",
	},
	{
		question: "How do I change my password?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax services range from discrete, one-time advice to complete.",
	},
	{
		question: "How hard developing a strategy is?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden.",
		link: "!#",
	},
	{
		question: "How hard developing a strategy is?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax services range from discrete, one-time advice to complete.",
	},
];

const Faq14 = () => {
	return (
		<section className="ezy__faq14" id="ezy__faq14">
			<Container>
				<Row>
					<Col xs={12} className="text-center text-sm-start">
						<h2 className="ezy__faq14-heading mb-0">
							Frequently Asked Questions
						</h2>
						<p className="ezy__faq14-sub-heading ms-sm-4">
							SOLVE YOUR PROBLEM.
						</p>
					</Col>
				</Row>

				<Row className="text-center text-md-start">
					{faqList.map((faq, i) => (
						<Col
							xs={12}
							md={6}
							lg={4}
							className="mt-4 mt-md-5 pe-sm-4 pe-lg-5"
							key={i}
						>
							<div className="ezy__faq14-item">
								<h3 className="ezy__faq14-item-title">{faq.question}</h3>
								<p className="mb-0 mt-3 mt-md-4">{faq.answer}</p>
								{faq.link && (
									<Button variant="outline-light" className="mt-3">
										Read More
									</Button>
								)}
							</div>
						</Col>
					))}
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__faq14 {
	/* 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);
	--ezy-rating-rgb: 255, 215, 0;

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

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

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

/* Dark Gray Block Style */
.dark-gray .ezy__faq14,
.ezy__faq14.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: none;
}

/* Dark Block Style */
.dark .ezy__faq14,
.ezy__faq14.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: none;
}

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

@media (min-width: 768px) {
	.ezy__faq14-heading {
		font-size: 50px;
		line-height: 70px;
	}
}

.ezy__faq14-sub-heading {
	font-size: 14px;
	line-height: 28px;
	color: var(--bs-body-color);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2px;
	opacity: 0.9;
}

.ezy__faq14-item p {
	color: var(--bs-body-color);
	font-size: 15px;
	line-height: 25px;
	font-weight: 300;
	letter-spacing: 1px;
	opacity: 0.7;
}

.ezy__faq14-item [class*="fa-"] {
	color: var(--bs-body-color);
	font-size: 80px;
	opacity: 0.5;
}

.ezy__faq14-item-title {
	color: var(--bs-body-color);
	font-size: 29px;
	line-height: 30px;
	font-weight: 400;
}

.ezy__faq14 .btn-outline-light {
	color: var(--bs-body-color);
	border-color: rgba(163, 190, 241, 0.24);
}

.ezy__faq14 .btn-outline-light:hover {
	color: var(--bs-body-bg);
	background-color: var(--bs-body-color);
}
</style>

import React from "react";

const faqList = [
	{
		question: "How hard developing a strategy is?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax services range from discrete, one-time advice to complete.",
	},
	{
		question: "How do I change my password?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax services range from discrete, one-time advice to complete.",
	},
	{
		question: "How hard developing a strategy is?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden.",
		link: "!#",
	},
	{
		question: "How do I change my password?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax services range from discrete, one-time advice to complete.",
	},
	{
		question: "How hard developing a strategy is?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden.",
		link: "!#",
	},
	{
		question: "How hard developing a strategy is?",
		answer:
			"Partner removes the hassle and confusion that comes from managing your tax burden effectively. Our tax services range from discrete, one-time advice to complete.",
	},
];

const Faq14 = () => {
	return (
		<section className="ezy__faq14 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">
					<div className="col-span-12 text-center sm:text-start">
						<h2 className="font-bold text-[35px] leading-[45px] md:text-[50px] md:leading-[70px]">
							Frequently Asked Questions
						</h2>
						<p className="text-sm leading-7 tracking-[2px] opacity-90 sm:ml-6">
							SOLVE YOUR PROBLEM.
						</p>
					</div>
				</div>

				<div className="grid grid-cols-12 text-center md:text-start gap-6 mt-12">
					{faqList.map((faq, i) => (
						<div
							className="col-span-12 md:col-span-6 lg:col-span-4 sm:pr-6 lg:pr-12"
							key={i}
						>
							<div>
								<h3 className="text-[29px] leading-none">{faq.question}</h3>
								<p className="text-[15px] leading-6 font-light tracking-[1px] opacity-70 mt-4 md:mt-6">
									{faq.answer}
								</p>
								{faq.link && (
									<button className="rounded border border-gray-200 dark:border-gray-600 hover:bg-neutral-800 hover:text-white px-4 py-2 mt-4">
										Read More
									</button>
								)}
							</div>
						</div>
					))}
				</div>
			</div>
		</section>
	);
};



FAQ #16Plain FAQ list

Available resources

Share with

Tags

You may also like