Home
kishan pc
FAQ - full size

FAQ - full size

Full sized FAQ section

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

FAQ

Author kishan pc

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

Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

2 months ago

534
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19k
FAQ - Htmlwind
Offset intro faq section

Author:
Htmlwind

3 months ago

400
Home
html , css

Author:
Hacker Development

4 months ago

328
FAQs
This is a FAQ it is made using html and tailwindcss

Author:
ishimwe shadad

4 months ago

525
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Author:
Dika Rahman

11 months ago

1.5k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

2 months ago

93
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 week ago

49
FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

4 months ago

348
Frequently Asked Questions section

Author:
Brandon D

2 years ago

11.7k
FAQ Section with AlpineJS

Author:
Maxim

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components