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

FAQ Section

Abdul Baset Bappy

1 year ago

1.1k
FAQs
This is a FAQ it is made using html and tailwindcss

ishimwe shadad

1 year ago

1.3k
FAQ with Tailwind CSS and Alpine.js

ariaw

1 year ago

1.6k
Frequently Asked Questions section

Brandon D

3 years ago

12.7k
Cards Seaction - Services block

ABDO-SY

1 year ago

2.4k
FAQ - Htmlwind
Offset intro faq section

Htmlwind

1 year ago

1.2k
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

6 months ago

629
FAQ section
An expanding frequently asked questions section made without using javascript.

Manuela Bianka

4 years ago

12.3k
FAQ section

Brandon D

3 years ago

11.4k
Home
html , css

Hacker Development

1 year ago

1.5k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
FAQ cards
FAQ section with cards

Moriba Traore

3 years ago

14.5k