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

135

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 work with leading organizations such as ASML, Vanderlande, Philips, FrieslandCampina, Prorail, Volkswagen and many others.</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 Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

Author:
King Kali

2 years ago

16.3k
Tailwind FAQ accordion

Author:
yousef

1 year ago

5.4k
Frequently Asked Questions section

Author:
Brandon D

3 years ago

12.2k
Home
html , css

Author:
Hacker Development

8 months ago

678
FAQ section

Author:
Simon Scheffer

3 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

7 months ago

1k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

6 months ago

820
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.1k
FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

8 months ago

671
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

18k
FAQ Section

Author:
Abdul Baset Bappy

7 months ago

436
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components