<div class="bg-gray-100">
    <div class="container mx-auto md:w-7/12 flex flex-col px-4">
        <p class="text-gray-400 uppercase font-semibold tracking-wider mt-16 text-center">Have something in mind?</p>
        <h3 class="text-gray-800 font-black text-3xl mt-2 text-center">Frequently Asked Questions</h3>
        <div id="accordion" class="py-8">
            <h3 class="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">What do you know how to do that you can teach to others?</h3>
            <div class="h-auto transition-height duration-500 ease-in-out">
                <p class="text-gray-500 leading-6 py-4">
                    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                </p>
            </div>
            <h3 class="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">If you could be a sound, what would it be?</h3>
            <div class="h-auto transition-height duration-500 ease-in-out">
                <p class="text-gray-500 leading-6 py-4">
                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                    suscipit faucibus urna.
                </p>
            </div>
            <h3 class="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">What is the funniest thing that ever happened to you?</h3>
            <div class="h-auto transition-height duration-500 ease-in-out">
                <p class="text-gray-500 leading-6 py-4">
                    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                </p>
            </div>
            <h3 class="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">What do you think your life will be like in the future?</h3>
            <div class="h-auto transition-height duration-500 ease-in-out">
                <p class="text-gray-500 leading-6 py-4">
                    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                    mauris vel est.
                </p>
                <p class="text-gray-500 leading-6 py-4">
                    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos himenaeos.
                </p>
            </div>
            <h3 class="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">What is the most wonderful thing that ever happened to you?</h3>
            <div class="h-auto transition-height duration-500 ease-in-out">
                <p class="text-gray-500 leading-6 py-4">
                    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                </p>
            </div>
            <h3 class="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">Who is your best friend and why?</h3>
            <div class="h-auto transition-height duration-500 ease-in-out">
                <p class="text-gray-500 leading-6 py-4">
                    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
                    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
                    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
                    suscipit faucibus urna.
                </p>
            </div>
            <h3 class="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">If you could choose a new name for yourself, what would it be, and why?</h3>
            <div class="h-auto transition-height duration-500 ease-in-out">
                <p class="text-gray-500 leading-6 py-4">
                    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
                </p>
            </div>
            <h3 class="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">What is the coolest thing you saw someone do today?</h3>
            <div class="h-auto transition-height duration-500 ease-in-out">
                <p class="text-gray-500 leading-6 py-4">
                    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
                    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
                    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
                    mauris vel est.
                </p>
                <p class="text-gray-500 leading-6 py-4">
                    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                    inceptos himenaeos.
                </p>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
    $( function() {
      $( "#accordion" ).accordion({
        heightStyle: "content"
      });
    } );
</script>

                

                    const FAQ = () => {
    return (
        <div className="bg-gray-100">
            <div className="container mx-auto md:w-7/12 flex flex-col px-4">
                <p className="text-gray-400 uppercase font-semibold tracking-wider mt-16 text-center">
                    Have something in mind?
                </p>
                <h3 className="text-gray-800 font-black text-3xl mt-2 text-center">
                    Frequently Asked Questions
                </h3>
                <div id="accordion" className="py-8">
                    <h3 className="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">
                        What do you know how to do that you can teach to others?
                    </h3>
                    <div className="h-auto transition-height duration-500 ease-in-out">
                        <p className="text-gray-500 leading-6 py-4">
                            Mauris mauris ante, blandit et, ultrices a, suscipit
                            eget, quam. Integer ut neque. Vivamus nisi metus,
                            molestie vel, gravida in, condimentum sit amet,
                            nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin
                            viverra leo ut odio. Curabitur malesuada. Vestibulum
                            a velit eu ante scelerisque vulputate.
                        </p>
                    </div>
                    <h3 className="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">
                        If you could be a sound, what would it be?
                    </h3>
                    <div className="h-auto transition-height duration-500 ease-in-out">
                        <p className="text-gray-500 leading-6 py-4">
                            Sed non urna. Donec et ante. Phasellus eu ligula.
                            Vestibulum sit amet purus. Vivamus hendrerit, dolor
                            at aliquet laoreet, mauris turpis porttitor velit,
                            faucibus interdum tellus libero ac justo. Vivamus
                            non quam. In suscipit faucibus urna.
                        </p>
                    </div>
                    <h3 className="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">
                        What is the funniest thing that ever happened to you?
                    </h3>
                    <div className="h-auto transition-height duration-500 ease-in-out">
                        <p className="text-gray-500 leading-6 py-4">
                            Nam enim risus, molestie et, porta ac, aliquam ac,
                            risus. Quisque lobortis. Phasellus pellentesque
                            purus in massa. Aenean in pede. Phasellus ac libero
                            ac tellus pellentesque semper. Sed ac felis. Sed
                            commodo, magna quis lacinia ornare, quam ante
                            aliquam nisi, eu iaculis leo purus venenatis dui.
                        </p>
                    </div>
                    <h3 className="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">
                        What do you think your life will be like in the future?
                    </h3>
                    <div className="h-auto transition-height duration-500 ease-in-out">
                        <p className="text-gray-500 leading-6 py-4">
                            Cras dictum. Pellentesque habitant morbi tristique
                            senectus et netus et malesuada fames ac turpis
                            egestas. Vestibulum ante ipsum primis in faucibus
                            orci luctus et ultrices posuere cubilia Curae;
                            Aenean lacinia mauris vel est.
                        </p>
                        <p className="text-gray-500 leading-6 py-4">
                            Suspendisse eu nisl. Nullam ut libero. Integer
                            dignissim consequat lectus. Class aptent taciti
                            sociosqu ad litora torquent per conubia nostra, per
                            inceptos himenaeos.
                        </p>
                    </div>
                    <h3 className="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">
                        What is the most wonderful thing that ever happened to
                        you?
                    </h3>
                    <div className="h-auto transition-height duration-500 ease-in-out">
                        <p className="text-gray-500 leading-6 py-4">
                            Mauris mauris ante, blandit et, ultrices a, suscipit
                            eget, quam. Integer ut neque. Vivamus nisi metus,
                            molestie vel, gravida in, condimentum sit amet,
                            nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin
                            viverra leo ut odio. Curabitur malesuada. Vestibulum
                            a velit eu ante scelerisque vulputate.
                        </p>
                    </div>
                    <h3 className="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">
                        Who is your best friend and why?
                    </h3>
                    <div className="h-auto transition-height duration-500 ease-in-out">
                        <p className="text-gray-500 leading-6 py-4">
                            Sed non urna. Donec et ante. Phasellus eu ligula.
                            Vestibulum sit amet purus. Vivamus hendrerit, dolor
                            at aliquet laoreet, mauris turpis porttitor velit,
                            faucibus interdum tellus libero ac justo. Vivamus
                            non quam. In suscipit faucibus urna.
                        </p>
                    </div>
                    <h3 className="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">
                        If you could choose a new name for yourself, what would
                        it be, and why?
                    </h3>
                    <div className="h-auto transition-height duration-500 ease-in-out">
                        <p className="text-gray-500 leading-6 py-4">
                            Nam enim risus, molestie et, porta ac, aliquam ac,
                            risus. Quisque lobortis. Phasellus pellentesque
                            purus in massa. Aenean in pede. Phasellus ac libero
                            ac tellus pellentesque semper. Sed ac felis. Sed
                            commodo, magna quis lacinia ornare, quam ante
                            aliquam nisi, eu iaculis leo purus venenatis dui.
                        </p>
                    </div>
                    <h3 className="font-bold text-base md:text-xl text-gray-700 border-b border-gray-200 py-4 cursor-pointer">
                        What is the coolest thing you saw someone do today?
                    </h3>
                    <div className="h-auto transition-height duration-500 ease-in-out">
                        <p className="text-gray-500 leading-6 py-4">
                            Cras dictum. Pellentesque habitant morbi tristique
                            senectus et netus et malesuada fames ac turpis
                            egestas. Vestibulum ante ipsum primis in faucibus
                            orci luctus et ultrices posuere cubilia Curae;
                            Aenean lacinia mauris vel est.
                        </p>
                        <p className="text-gray-500 leading-6 py-4">
                            Suspendisse eu nisl. Nullam ut libero. Integer
                            dignissim consequat lectus. Class aptent taciti
                            sociosqu ad litora torquent per conubia nostra, per
                            inceptos himenaeos.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default FAQ;