Home
Omer fils ELENGA
faq ui simple

faq ui simple

This tailwind example is contributed by Omer fils ELENGA, on 07-Mar-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Omer fils ELENGA

406

Fork Fullscreen

body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #fcfcfd; }

/* Style épuré et moderne */
    .faq-container { max-width: 800px; margin: auto; }
    
    .faq-card {
        background: white;
        border: 1px solid #f0f0f0;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

.faq-card:hover {
        border-color: #6366f1;
        box-shadow: 0 20px 40px rgba(0,0,0,0.04);
    }

/* L'effet Loupe sur le texte au survol */
    .magnify-text {
        display: inline-block;
        transition: transform 0.3s ease, color 0.3s ease;
        cursor: pointer;
    }
    
    .faq-card:hover .magnify-text {
        transform: scale(1.02) translateX(5px);
        color: #000;
    }

/* Style du moteur de recherche */
    #searchInput {
        transition: all 0.3s ease;
        background: #f8fafc;
    }
    #searchInput:focus {
        background: white;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        width: 100% !important;
    }

.highlight {
        background: #e0e7ff;
        color: #4338ca;
        padding: 0 2px;
        border-radius: 4px;
        font-weight: 600;
    }

.answer-wrapper {
        overflow: hidden;
        height: 0; /* Pour l'animation GSAP */
        opacity: 0;
    }
</style>

<div class="p-8 faq-container">
    <div class="flex flex-col sm:flex-row justify-between items-end mb-12">
        <div>
            <h1 class="text-4xl font-light text-gray-900 tracking-tight">Questions <span class="font-bold text-indigo-600 italic">Existentielles</span></h1>
            <p class="text-gray-400 text-sm mt-2">Parce qu'on se pose tous des questions bizarres.</p>
        </div>
        <input type="text" id="searchInput" onkeyup="filterFAQs()" placeholder="Chercher un mystère..." 
               class="w-full sm:w-1/3 p-3 border-none rounded-xl text-sm outline-none mt-6 sm:mt-0" />
    </div>

<ul id="faqList" class="space-y-4">
        <li class="faq-item">
            <div class="faq-card p-6 rounded-2xl cursor-pointer" onclick="toggleFAQ(this)">
                <div class="flex justify-between items-center">
                    <span class="text-lg text-gray-700 magnify-text font-medium">
                        <span class="text-indigo-300 mr-2">01.</span> Pourquoi appelle-t-on un "bâtiment" ainsi s'il est déjà bâti ?
                    </span>
                    <svg class="w-5 h-5 text-gray-400 arrow-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
                </div>
                <div class="answer-wrapper">
                    <div class="answer pt-4 text-gray-500 leading-relaxed border-t border-gray-50 mt-4">
                        C'est le grand mystère de la langue française ! On devrait sans doute dire un "bâti". Mais bon, comme on appelle une "boisson" quelque chose qu'on a déjà fini de boire, on n'est plus à une bizarrerie près ! ☕
                    </div>
                </div>
            </div>
        </li>

<li class="faq-item">
            <div class="faq-card p-6 rounded-2xl cursor-pointer" onclick="toggleFAQ(this)">
                <div class="flex justify-between items-center">
                    <span class="text-lg text-gray-700 magnify-text font-medium">
                        <span class="text-indigo-300 mr-2">02.</span> Si un mot est mal orthographié dans le dictionnaire, comment le saurait-on ?
                    </span>
                    <svg class="w-5 h-5 text-gray-400 arrow-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
                </div>
                <div class="answer-wrapper">
                    <div class="answer pt-4 text-gray-500 leading-relaxed border-t border-gray-50 mt-4">
                        On vivrait dans un mensonge collectif jusqu'à la fin des temps. Heureusement que les lexicographes ne boivent pas trop de café... ou peut-être que si ? 🤔
                    </div>
                </div>
            </div>
        </li>

<li class="faq-item">
            <div class="faq-card p-6 rounded-2xl cursor-pointer" onclick="toggleFAQ(this)">
                <div class="flex justify-between items-center">
                    <span class="text-lg text-gray-700 magnify-text font-medium">
                        <span class="text-indigo-300 mr-2">03.</span> Un kangourou peut-il sauter plus haut qu'une maison ?
                    </span>
                    <svg class="w-5 h-5 text-gray-400 arrow-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"></path></svg>
                </div>
                <div class="answer-wrapper">
                    <div class="answer pt-4 text-gray-500 leading-relaxed border-t border-gray-50 mt-4">
                        Absolument ! Car les maisons ne sautent pas. Victoire par forfait pour Joey le kangourou ! 🦘
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

function toggleFAQ(card) {
        const wrapper = card.querySelector('.answer-wrapper');
        const arrow = card.querySelector('.arrow-icon');
        const isOpen = wrapper.classList.contains('is-open');

if (!isOpen) {
            // Ouvrir avec GSAP (fluide)
            gsap.to(wrapper, { height: "auto", opacity: 1, duration: 0.5, ease: "elastic.out(1, 0.8)" });
            gsap.to(arrow, { rotate: 180, duration: 0.3 });
            wrapper.classList.add('is-open');
        } else {
            // Fermer
            gsap.to(wrapper, { height: 0, opacity: 0, duration: 0.3, ease: "power2.in" });
            gsap.to(arrow, { rotate: 0, duration: 0.3 });
            wrapper.classList.remove('is-open');
        }
    }

function filterFAQs() {
        const filter = document.getElementById('searchInput').value.toLowerCase();
        const items = document.querySelectorAll('.faq-item');

items.forEach(item => {
            const text = item.textContent.toLowerCase();
            if (text.includes(filter)) {
                gsap.to(item, { display: "block", opacity: 1, scale: 1, duration: 0.3 });
            } else {
                gsap.to(item, { display: "none", opacity: 0, scale: 0.9, duration: 0.3 });
            }
        });
    }
</script>

Related Examples

FAQ page

Author:
R Thapa

2 years ago

16.1k
FAQ Section with AlpineJS

Author:
Maxim

1 year ago

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

Author:
Manuela Bianka

4 years ago

12.3k
Cards Seaction - Services block

Author:
ABDO-SY

1 year ago

2.4k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Author:
Achraf Testq

5 months ago

602
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 year ago

786
about video
about kelaplus video

Author:
Omer fils ELENGA

1 year ago

1.2k
FAQ section

Author:
Brandon D

3 years ago

11.4k
Frequently asked questions (FAQ)

Author:
Brandon D

3 years ago

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

2 years ago

10.6k
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.3k
Frequently Asked Questions section

Author:
Brandon D

3 years ago

12.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components