Home
Nikola Małecka
Accordion FAQ

Accordion FAQ

This tailwind example is contributed by Nikola Małecka, on 10-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA,collapsible

FAQ Accordion

Author Nikola Małecka

917

Fork Fullscreen

<ul class="max-w-2xl mx-auto mt-20 divide-y  shadow shadow-blue-600 rounded-xl">
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>Jak przygotować dokumenty aplikacyjne?</span>
            </summary>

<article class="px-4 pb-4">
                <p>
                    Przeczytaj ogłoszenie o pracę i przeanalizuj, jakie są wymagania i oczekiwania dotyczące stanowiska, na które aplikujesz. Zawrzyj w swoim CV dane kontaktowe i krótkie streszczenie zawodowe.
Wymień doświadczenie od najnowszego do najstarszego, podając nazwę firmy, stanowisko, daty zatrudnienia oraz krótki opis obowiązków.
Opisz swoje osiągnięcia, umiejętności i zdobyte doświadczenie w związku ze stanowiskiem, na które aplikujesz.
Wymień swoje wykształcenie, umiejętności językowe i inne certyfikaty, które są istotne dla stanowiska.
Unikaj zbyt długiego CV - staraj się, aby mieściło się na nie więcej niż dwóch stronach - zostaw trochę informacji na rozmowę w kolejnym etapie. 🙂
                </p>
            </article>
        </details>
    </li>
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>‍Jak wyglądają poszczególne etapy rekrutacji?</span>
            </summary>

<article class="px-4 pb-4">
                <p>
                    Nasza rozmowa rekrutacyjna to wywiad behawioralny. To znaczy, że będziemy pytać Cię o Twoje doświadczenia i to jak zachowujesz się w danych sytuacjach. 
Pierwsza rozmowa z rekruterem odbywa się telefonicznie i trwa około 20 minut.
W drugim etapie rozmowa z rekruterem i przełożonym trwa około godziny.
Finałowy etap rekrutacji, w którym wykonujesz zadanie trwa około dwóch godzin.  </p>
            </article>
        </details>
    </li>
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>Jak przygotować się do rozmowy rekrutacyjnej?</span>
            </summary>

<article class="px-4 pb-4">
                <p>
                   Przeczytaj jeszcze raz ogłoszenie, na które złożyłeś aplikację, aby mieć aktualne informacje o wymaganiach na stanowisku. 
Skorzystaj z okazji, aby dowiedzieć się więcej o SmartLunch - odwiedź naszą stronę internetową i profile w social mediach. 
Warto przygotować kilka pytań, które chciałbyś zadać podczas rozmowy. Jesteśmy tutaj, aby rozwiać wszelkie Twoje wątpliwości.
Podczas rozmowy zachowuj się naturalnie. Twoja indywidualność jest dla nas bardzo ważna.
Nie posługuj się ogólnikami. Kiedy odpowiadasz na pytania, warto abyś sięgnął po przykłady z własnego doświadczenia, które ilustrują Twoje umiejętności. Naturalność i szczerość to kluczowe aspekty, które cenimy. </p>
            </article>
        </details>
    </li>
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>Spotkanie w biurze</span>
            </summary>

<article class="px-4 pb-4">
                <p>
                    Pamiętaj o punktualności. Przed spotkaniem sprawdź, ile czasu zajmie Ci dotarcie do celu. W przypadku, gdy przewidujesz opóźnienie, daj nam znać wcześniej. Twój czas i obecność są dla nas istotne.
Nie musisz brać ze sobą kopii dokumentów i CV, czy referencji.
Podczas spotkania  stacjonarnego na pewno zaproponujemy Ci wodę, kawę lub herbatę.
Dobrym pomysłem jest również wzięcie notatnika i długopisu, aby móc coś na szybko zanotować.

Nasza siedziba znajduje się we Wrocławiu przy ulicy Kutnowskiej 1-3. Jeśli korzystasz z komunikacji miejskiej, możesz do nas dojechać liniami: 2, 3, 4, 6, 7, 11, 12, 13, 14, 17, 18, 19, 20, 21, 23, 126, 134, 247, 248, D. W pobliżu naszej firmy znajduje się przystanek Orla. </p>
       </article>
        </details>
    </li>
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>Spotkanie online</span>
            </summary>

<article class="px-4 pb-4">
                <p>
                   Upewnij się, że masz spokojne miejsce, gdzie nie będzie zakłóceń i będziesz miał_ stabilny dostęp do internetu. 
Jeśli jest potrzeba, załóż słuchawki, aby skupić się na rozmowie. 
Sprawdź funkcjonalność narzędzia, z którego będziesz korzystać podczas wideorozmowy. Pamiętaj, aby upewnić się, że masz działającą kamerę, głośniki oraz naładowany komputer.
Wycisz swój telefon, aby nie przeszkadzał Ci podczas rozmowy. Jednak, trzymaj go w zasięgu, abyśmy mogli łatwo się z Tobą skontaktować w przypadku problemów technicznych. Jeśli napotkasz trudności z połączeniem lub sprzętem, natychmiast daj nam znać. Zawsze możemy dostosować plan lub kontynuować rozmowę telefonicznie.
Twój komputer działa bez zarzutu, masz odpowiednie oświetlenie i schludne tło? Dołącz punktualnie do telekonferencji. </p>
            </article>
        </details>
         </article>
        </details>
    </li>
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>Jaki dresscode obowiązuje podczas rozmowy?</span>
            </summary>

<article class="px-4 pb-4">
                <p>
                   Ubierz się schludnie, ale tak, żeby czuć się swobodnie i aby móc w komfortowych warunkach uczestniczyć w spotkaniu. W naszej firmie nie obowiązuje dresscode, nie wymagamy więc formalnego ubioru. Na rozmowie z nami można nosić jeansy, t-shirty i swobodne ubrania, można eksperymentować z modą i wyrażać swoją kreatywność, zachowując przy tym profesjonalizm. </p>
            </article>
        </details>
           </article>
        </details>
         </article>
        </details>
    </li>
    <li>
        <details class="group">
            <summary class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
                <span>Kiedy otrzymam informację zwrotną?</span>
            </summary>

<article class="px-4 pb-4">
                <p>
                  Każda z osób, z którą spotkaliśmy się może liczyć na feedback po rekrutacji. Informujemy o zakończeniu danej rekrutacji i przekazujemy informację zwrotną niezależnie od decyzji o zatrudnieniu. To na tym etapie przekazujemy Ci tę wspaniałą informację o zaproszeniu do zespołu i składamy ofertę pracy. Jeśli jednak tym razem Twoja kandydatura nie została wybrana jako najbardziej odpowiednia, również możesz liczyć na feedback, a jeśli sobie tego życzysz, również pogłębioną informację zwrotną, aby wiedzieć nad czym możesz pracować. Jeśli uda Ci się rozwinąć swoje umiejętności, z chęcią spotkamy się ponownie. 🙂 </p>
            </article>
        </details>
    </li>

</ul>

Related Examples

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

Author:
Manuela Bianka

3 years ago

11.7k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

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

Author:
King Kali

1 year ago

15.6k
Tailwind FAQ accordion

Author:
yousef

1 year ago

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

Author:
inbarajan P

1 year ago

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

9 months ago

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

Author:
Rajesh Maheshwari

7 months ago

938
FAQ with Search

Author:
Dpk Mht

1 year ago

2.1k
HOT DOGS WEB SITE
it combine the hot dogs delivary

Author:
bonheur dev

4 months ago

316
Accordion with minimum javascript

Author:
Anonymous

2 years ago

9k
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.5k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

2 days ago

10

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components