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

147

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 with Search

Author:
Dpk Mht

1 year ago

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

18.1k
FAQ page

Author:
R Thapa

2 years ago

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

2k
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.4k
Cards Seaction - Services block

Author:
ABDO-SY

11 months ago

1.8k
FAQ Section

Author:
Abdul Baset Bappy

8 months ago

644
FAQ Section with AlpineJS

Author:
Maxim

1 year ago

1.7k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

8 months ago

586
faq ui simple
faq ui simple

Author:
Omer fils ELENGA

1 week ago

9
Accordion FAQ

Author:
Nikola Małecka

1 year ago

1.3k
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

Author:
inbarajan P

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components