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

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

2 years ago

10.1k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

1 year ago

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

12.9k
Tailwind FAQ accordion

Author:
yousef

9 months ago

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

Author:
inbarajan P

4 months ago

550
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

4 days ago

80
details & summary beautiful styling & animation
details & summary beautiful styling & animation

Author:
Cristian

3 months ago

458
FAQ section
Frequently asked questions component

Author:
Bunny

1 year ago

9.6k
Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Author:
Maxim

2 weeks ago

35
FAQ page

Author:
R Thapa

1 year ago

13.5k
Simple Accordion with Alpine Js and Tailwind CSS

Author:
Anonymous

5 months ago

1.4k
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

179

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components