FAQ - full size

Full sized FAQ section

This tailwind example is contributed by kishan pc, on 30-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Frequently asked questions, QnA

FAQ

Author kishan pc

Tailwind v3.4 3k 3

Fork Fullscreen

<div id="faq" class="mx-auto max-w-2xl divide-y divide-gray-900/10 lg:max-w-7xl p-4 md:p-8 dark:bg-gray-800">
  <h2 class="mt-2 font-header text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Frequently asked questions
  </h2>
  <dl class="mt-10 space-y-8 divide-y divide-gray-900/10">
    <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
      <dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-3 dark:text-gray-300">What are the benefits of regular
        exercise?</dt>
      <dd class="mt-4 lg:col-span-9 lg:mt-0">
        <p class="text-base leading-7 text-gray-600 dark:text-gray-400">Regular exercise has numerous benefits, including improved
          cardiovascular health, increased muscle strength and endurance, better mood and mental health, and reduced
          risk of chronic diseases such as diabetes and heart disease.</p>
      </dd>
    </div>
    <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
      <dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-3 dark:text-gray-300">What is a balanced diet?</dt>
      <dd class="mt-4 lg:col-span-9 lg:mt-0">
        <p class="text-base leading-7 text-gray-600 dark:text-gray-400">A balanced diet includes a variety of foods from all food groups,
          such as fruits, vegetables, whole grains, lean proteins, and healthy fats. It provides the nutrients your body
          needs to function optimally and maintain good health.</p>
      </dd>
    </div>
    <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
      <dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-3 dark:text-gray-300">How much water should I drink per day?</dt>
      <dd class="mt-4 lg:col-span-9 lg:mt-0">
        <p class="text-base leading-7 text-gray-600 dark:text-gray-400">The amount of water you need to drink per day varies depending on
          factors such as your age, gender, activity level, and climate. As a general guideline, aim to drink at least 8
          glasses (64 ounces) of water per day, but adjust this amount based on your individual needs.</p>
      </dd>
    </div>
    <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
      <dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-3 dark:text-gray-300">How can I improve my sleep quality?</dt>
      <dd class="mt-4 lg:col-span-9 lg:mt-0">
        <p class="text-base leading-7 text-gray-600 dark:text-gray-400">To improve your sleep quality, establish a regular sleep schedule,
          create a relaxing bedtime routine, ensure your sleep environment is comfortable and conducive to sleep, limit
          screen time before bed, avoid caffeine and heavy meals close to bedtime, and manage stress through relaxation
          techniques such as meditation or deep breathing exercises.</p>
      </dd>
    </div>
    <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
      <dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-3 dark:text-gray-300">What are the benefits of mindfulness meditation?</dt>
      <dd class="mt-4 lg:col-span-9 lg:mt-0">
        <p class="text-base leading-7 text-gray-600 dark:text-gray-400">Mindfulness meditation has been shown to reduce stress, anxiety,
          and depression, improve attention and focus, promote emotional well-being, enhance self-awareness and
          introspection, and contribute to overall mental and physical health.</p>
      </dd>
    </div>
    <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
      <dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-3 dark:text-gray-300">What are the signs of dehydration?</dt>
      <dd class="mt-4 lg:col-span-9 lg:mt-0">
        <p class="text-base leading-7 text-gray-600 dark:text-gray-400">Signs of dehydration include thirst, dark-colored urine, infrequent
          urination, dry mouth, fatigue, dizziness, and confusion. It's important to drink water regularly throughout
          the day to prevent dehydration.</p>
      </dd>
    </div>
    <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
      <dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-3 dark:text-gray-300">How can I reduce stress in my daily life?</dt>
      <dd class="mt-4 lg:col-span-9 lg:mt-0">
        <p class="text-base leading-7 text-gray-600 dark:text-gray-400">To reduce stress, incorporate stress-relief techniques into your
          daily routine, such as exercise, meditation, deep breathing exercises, spending time in nature, engaging in
          hobbies you enjoy, getting enough sleep, and maintaining a healthy work-life balance.</p>
      </dd>
    </div>
    <div class="pt-8 lg:grid lg:grid-cols-12 lg:gap-8">
      <dt class="text-base font-semibold leading-7 text-gray-900 lg:col-span-3 dark:text-gray-300">What are the benefits of quitting smoking?</dt>
      <dd class="mt-4 lg:col-span-9 lg:mt-0">
        <p class="text-base leading-7 text-gray-600 dark:text-gray-400">Quitting smoking has numerous health benefits, including reduced
          risk of cancer, heart disease, stroke, respiratory diseases, and other smoking-related illnesses. It also
          improves lung function, enhances circulation, boosts immune function, and increases life expectancy.</p>
      </dd>
    </div>
  </dl>
</div>

Related Examples

FAQs
Frequently Asked Questions

ORGIN_DREAMS

1 year ago

1.3k
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

inbarajan P

2 years ago

2.9k
FAQ section

Brandon D

3 years ago

11.4k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

450
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

612
Accordion FAQ
FAQ Accordion section without using any javascript

Ganesh Salunke

4 months ago

288
FAQ section
Frequently asked questions component

Bunny

3 years ago

11.9k
Acode master
Acode master(=>good work for Acode master)

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
FAQ Section with smooth Animations

JUGENDRA GANGWAR

2 days ago

5
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Rajesh Maheshwari

1 year ago

2k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

788