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

2.5k

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

Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

1 year ago

1.9k
Frequently Asked Questions section

Author:
Brandon D

3 years ago

12.2k
FAQ section

Author:
Simon Scheffer

3 years ago

11k
Pricing component luxuries
A modern, luxurious, and elegant pricing component with HTML and Tailwind CSS.

Author:
Alif Bima Pradana

4 days ago

16
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.6k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

10 months ago

1.4k
FAQ section

Author:
Brandon D

3 years ago

11.1k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 year ago

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

Author:
ishimwe shadad

8 months ago

832
About Us Component

Author:
KULDEEP

7 months ago

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

Author:
Rajesh Maheshwari

11 months ago

1.2k
FAQ Section

Author:
Abdul Baset Bappy

7 months ago

441

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components