Home
Kevin
FAQ with dropdown

FAQ with dropdown

Created by Surjith S M -> https://twitter.com/surjithctly
This component does not use javascript for dropdown

This tailwind example is contributed by Kevin, on 26-Oct-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Kevin

Fork Fullscreen

<div class="bg-gray-50 py-12">
  <div class="mx-auto max-w-4xl px-6">
    <h2 class="text-center text-4xl font-bold mb-2">ICT Group FAQ</h2>
    <p class="text-center text-neutral-600 mb-10">Frequently Asked Questions about ICT Group</p>

<div class="bg-white shadow-md rounded-lg p-6 mb-8">
      <h3 class="text-2xl font-semibold text-indigo-600 mb-4">About ICT Group</h3>
      <div class="divide-y divide-neutral-200">
        <details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>What is ICT Group?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">ICT Group is a European specialist in digital transformation and industrial automation with over 45 years of experience.</p>
        </details>

<details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>Which markets does ICT Group serve?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">We operate in Automotive, High Tech, Machine & Device Manufacturing, Logistics, Pharma & Chemistry, Oil & Gas, Energy, Water, Rail & Road Transport, Public Transport, Mobility, and Healthcare.</p>
        </details>

<details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>Where are ICT Group offices located?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">Our offices are in the Netherlands, Belgium, Bulgaria, Sweden, Germany, and Portugal.</p>
        </details>
      </div>
    </div>

<div class="bg-white shadow-md rounded-lg p-6 mb-8">
      <h3 class="text-2xl font-semibold text-indigo-600 mb-4">Services & Solutions</h3>
      <div class="divide-y divide-neutral-200">
        <details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>What services does ICT Group offer?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">We provide consultancy, project-based solutions, managed services, and develop our own software products, including the Motar low-code platform.</p>
        </details>

<details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>What is the Motar low-code platform?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">Motar is a flexible platform for model-based development, enabling faster deployment at lower cost.</p>
        </details>

<details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>How does ICT Group support digital transformation?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">We assist organizations with Industry 4.0 implementation, data intelligence, and IT & OT integration.</p>
        </details>
      </div>
    </div>

<div class="bg-white shadow-md rounded-lg p-6 mb-8">
      <h3 class="text-2xl font-semibold text-indigo-600 mb-4">Partnerships</h3>
      <div class="divide-y divide-neutral-200">
        <details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>Which partners does ICT Group collaborate with?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">We collaborate with top-tier partners to solve complex customer challenges.</p>
        </details>

<details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>What role does ICT Group play in partnerships?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">As an independent system integrator, we manage the full chain of business processes and innovative technologies.</p>
        </details>
      </div>
    </div>

<div class="bg-white shadow-md rounded-lg p-6">
      <h3 class="text-2xl font-semibold text-indigo-600 mb-4">Careers</h3>
      <div class="divide-y divide-neutral-200">
        <details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>How can I apply to ICT Group?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">Applications are accepted via the ICT Group careers page.</p>
        </details>

<details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>What does ICT Group offer employees?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">We are certified as a ‘Great Place to Work’ and provide an environment where employees can be themselves and collaborate equally.</p>
        </details>

<details class="py-3 group">
          <summary class="flex justify-between cursor-pointer font-medium">
            <span>Which benefits are offered?</span>
            <span class="transition group-open:rotate-180">
              <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" width="20" height="20">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </summary>
          <p class="mt-2 text-neutral-600">Employees receive a 13th month, pension scheme, 29 vacation days, travel allowance, personal development budget, and flexible/hybrid work options.</p>
        </details>
      </div>
    </div>
  </div>
</div>

Related Examples

FAQ - Htmlwind
Offset intro faq section

Author:
Htmlwind

5 months ago

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

Author:
Manuela Bianka

3 years ago

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

Author:
Rajesh Maheshwari

8 months ago

982
FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

5 months ago

453
FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Author:
Abhijit Sen

2 years ago

17.7k
FAQ Section with AlpineJS

Author:
Maxim

7 months ago

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

1 year ago

9.7k
Accordion FAQ

Author:
Nikola Małecka

9 months ago

1k
Simple expanded FAQ example

Author:
Orson Kincaid

1 year ago

1.4k
FAQ - full size
Full sized FAQ section

Author:
kishan pc

1 year ago

2.2k
FAQ section

Author:
Simon Scheffer

2 years ago

10.9k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

8 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components