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.5k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

1 year ago

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

13.5k
Tailwind FAQ accordion

Author:
yousef

10 months ago

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

Author:
inbarajan P

5 months ago

820
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 month ago

256
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

11.2k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

3 weeks ago

439
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

8.2k
Accordion with minimum javascript

Author:
Anonymous

1 year ago

8.1k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

3 months ago

397
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

9.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components