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

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

Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

3 months ago

433
FAQ section

Author:
Simon Scheffer

3 years ago

11k
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

604
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

11 months ago

1.5k
Simple expanded FAQ example

Author:
Orson Kincaid

1 year ago

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

Author:
R Thapa

2 years ago

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

1 year ago

2.4k
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Author:
Dika Rahman

1 year ago

1.7k
FAQ with Search

Author:
Dpk Mht

1 year ago

2.5k
about video
about kelaplus video

Author:
Omer fils ELENGA

7 months ago

830

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components