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.4k

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
An expanding frequently asked questions section made without using javascript.

Author:
Manuela Bianka

3 years ago

11.8k
FAQ section

Author:
Brandon D

2 years ago

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

5 months ago

980
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

11 months ago

1.9k
FAQ Section

Author:
Abdul Baset Bappy

6 months ago

413
Cards Seaction - Services block

Author:
ABDO-SY

9 months ago

1.4k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

Author:
King Kali

2 years ago

16k
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

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

Author:
ishimwe shadad

7 months ago

753
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

11 months ago

2k
Accordion FAQ
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Author:
Anonymous

2 years ago

10.1k
Home
html , css

Author:
Hacker Development

7 months ago

621

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components