FAQ UI Components – Shopky Library

<section class="py-24">
    <div class="container mx-auto px-4">
        <span class="inline-block text-xs mb-3 py-1 px-5 bg-orange-800 rounded-4xl">What you wanna know about the fashion?</span>
        <h4 class="font-heading text-6xl">Frequently asked questions</h4>
        <p class="mb-16 text-gray-500 max-w-md">Everything you need to know about our product and how it work. Don’t find an answer? Please chat to our team </p>
        <div class="flex flex-wrap -m-9">
            <div class="w-full md:w-1/2 p-9">
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="mb-10 pb-6 border-b border-gray-200">
                    <div class="flex flex-wrap items-center justify-between -m-2 cursor-pointer">
                        <div class="w-auto p-2">
                            <h6 class="font-heading text-3xl">What is fashion?</h6>
                        </div>
                        <div class="w-auto p-2">
                            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                                <svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.6664 1.22671C13.4166 0.978378 13.0787 0.838989 12.7264 0.838989C12.3742 0.838989 12.0363 0.978378 11.7864 1.22671L6.99977 5.94671L2.27977 1.22671C2.02995 0.978378 1.69202 0.838989 1.33977 0.838989C0.987521 0.838989 0.649585 0.978378 0.399769 1.22671C0.274798 1.35066 0.175605 1.49813 0.107913 1.66061C0.0402218 1.82309 0.00537109 1.99736 0.00537109 2.17338C0.00537109 2.3494 0.0402218 2.52367 0.107913 2.68615C0.175605 2.84863 0.274798 2.9961 0.399769 3.12005L6.0531 8.77338C6.17705 8.89835 6.32452 8.99754 6.487 9.06523C6.64948 9.13293 6.82375 9.16778 6.99977 9.16778C7.17578 9.16778 7.35006 9.13293 7.51254 9.06523C7.67502 8.99754 7.82248 8.89835 7.94643 8.77338L13.6664 3.12005C13.7914 2.9961 13.8906 2.84863 13.9583 2.68615C14.026 2.52367 14.0608 2.3494 14.0608 2.17338C14.0608 1.99736 14.026 1.82309 13.9583 1.66061C13.8906 1.49813 13.7914 1.35066 13.6664 1.22671Z" fill="#1E2238"></path>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="mt-2 text-lg text-gray-500">Fashion refers to the popular styles and trends of clothing, accessories, and beauty products at a given time.</p>
                    </div>
                </div>
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="mb-10 pb-6 border-b border-gray-200">
                    <div class="flex flex-wrap items-center justify-between -m-2 cursor-pointer">
                        <div class="w-auto p-2">
                            <h6 class="font-heading text-3xl">What is sustainable fashion?</h6>
                        </div>
                        <div class="w-auto p-2">
                            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                                <svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.6664 1.22671C13.4166 0.978378 13.0787 0.838989 12.7264 0.838989C12.3742 0.838989 12.0363 0.978378 11.7864 1.22671L6.99977 5.94671L2.27977 1.22671C2.02995 0.978378 1.69202 0.838989 1.33977 0.838989C0.987521 0.838989 0.649585 0.978378 0.399769 1.22671C0.274798 1.35066 0.175605 1.49813 0.107913 1.66061C0.0402218 1.82309 0.00537109 1.99736 0.00537109 2.17338C0.00537109 2.3494 0.0402218 2.52367 0.107913 2.68615C0.175605 2.84863 0.274798 2.9961 0.399769 3.12005L6.0531 8.77338C6.17705 8.89835 6.32452 8.99754 6.487 9.06523C6.64948 9.13293 6.82375 9.16778 6.99977 9.16778C7.17578 9.16778 7.35006 9.13293 7.51254 9.06523C7.67502 8.99754 7.82248 8.89835 7.94643 8.77338L13.6664 3.12005C13.7914 2.9961 13.8906 2.84863 13.9583 2.68615C14.026 2.52367 14.0608 2.3494 14.0608 2.17338C14.0608 1.99736 14.026 1.82309 13.9583 1.66061C13.8906 1.49813 13.7914 1.35066 13.6664 1.22671Z" fill="#1E2238"></path>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="mt-2 text-lg text-gray-500">Sustainable fashion refers to clothing, accessories, and beauty products that are produced in an environmentally and socially responsible way, using sustainable materials and practices.</p>
                    </div>
                </div>
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="pb-6 border-b border-gray-200">
                    <div class="flex flex-wrap items-center justify-between -m-2 cursor-pointer">
                        <div class="w-auto p-2">
                            <h6 class="font-heading text-3xl">What is sustainable fashion?</h6>
                        </div>
                        <div class="w-auto p-2">
                            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                                <svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.6664 1.22671C13.4166 0.978378 13.0787 0.838989 12.7264 0.838989C12.3742 0.838989 12.0363 0.978378 11.7864 1.22671L6.99977 5.94671L2.27977 1.22671C2.02995 0.978378 1.69202 0.838989 1.33977 0.838989C0.987521 0.838989 0.649585 0.978378 0.399769 1.22671C0.274798 1.35066 0.175605 1.49813 0.107913 1.66061C0.0402218 1.82309 0.00537109 1.99736 0.00537109 2.17338C0.00537109 2.3494 0.0402218 2.52367 0.107913 2.68615C0.175605 2.84863 0.274798 2.9961 0.399769 3.12005L6.0531 8.77338C6.17705 8.89835 6.32452 8.99754 6.487 9.06523C6.64948 9.13293 6.82375 9.16778 6.99977 9.16778C7.17578 9.16778 7.35006 9.13293 7.51254 9.06523C7.67502 8.99754 7.82248 8.89835 7.94643 8.77338L13.6664 3.12005C13.7914 2.9961 13.8906 2.84863 13.9583 2.68615C14.026 2.52367 14.0608 2.3494 14.0608 2.17338C14.0608 1.99736 14.026 1.82309 13.9583 1.66061C13.8906 1.49813 13.7914 1.35066 13.6664 1.22671Z" fill="#1E2238"></path>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="mt-2 text-lg text-gray-500">Sustainable fashion refers to clothing, accessories, and beauty products that are produced in an environmentally and socially responsible way, using sustainable materials and practices.</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 p-9">
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="mb-10 pb-6 border-b border-gray-200">
                    <div class="flex flex-wrap items-center justify-between -m-2 cursor-pointer">
                        <div class="w-auto p-2">
                            <h6 class="font-heading text-3xl">What is sustainable fashion?</h6>
                        </div>
                        <div class="w-auto p-2">
                            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                                <svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.6664 1.22671C13.4166 0.978378 13.0787 0.838989 12.7264 0.838989C12.3742 0.838989 12.0363 0.978378 11.7864 1.22671L6.99977 5.94671L2.27977 1.22671C2.02995 0.978378 1.69202 0.838989 1.33977 0.838989C0.987521 0.838989 0.649585 0.978378 0.399769 1.22671C0.274798 1.35066 0.175605 1.49813 0.107913 1.66061C0.0402218 1.82309 0.00537109 1.99736 0.00537109 2.17338C0.00537109 2.3494 0.0402218 2.52367 0.107913 2.68615C0.175605 2.84863 0.274798 2.9961 0.399769 3.12005L6.0531 8.77338C6.17705 8.89835 6.32452 8.99754 6.487 9.06523C6.64948 9.13293 6.82375 9.16778 6.99977 9.16778C7.17578 9.16778 7.35006 9.13293 7.51254 9.06523C7.67502 8.99754 7.82248 8.89835 7.94643 8.77338L13.6664 3.12005C13.7914 2.9961 13.8906 2.84863 13.9583 2.68615C14.026 2.52367 14.0608 2.3494 14.0608 2.17338C14.0608 1.99736 14.026 1.82309 13.9583 1.66061C13.8906 1.49813 13.7914 1.35066 13.6664 1.22671Z" fill="#1E2238"></path>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="mt-2 text-lg text-gray-500">Fast fashion refers to the quick production of inexpensive clothing and accessories that are designed to be replaced quickly as trends change.</p>
                    </div>
                </div>
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="mb-10 pb-6 border-b border-gray-200">
                    <div class="flex flex-wrap items-center justify-between -m-2 cursor-pointer">
                        <div class="w-auto p-2">
                            <h6 class="font-heading text-3xl">What is haute couture?</h6>
                        </div>
                        <div class="w-auto p-2">
                            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                                <svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.6664 1.22671C13.4166 0.978378 13.0787 0.838989 12.7264 0.838989C12.3742 0.838989 12.0363 0.978378 11.7864 1.22671L6.99977 5.94671L2.27977 1.22671C2.02995 0.978378 1.69202 0.838989 1.33977 0.838989C0.987521 0.838989 0.649585 0.978378 0.399769 1.22671C0.274798 1.35066 0.175605 1.49813 0.107913 1.66061C0.0402218 1.82309 0.00537109 1.99736 0.00537109 2.17338C0.00537109 2.3494 0.0402218 2.52367 0.107913 2.68615C0.175605 2.84863 0.274798 2.9961 0.399769 3.12005L6.0531 8.77338C6.17705 8.89835 6.32452 8.99754 6.487 9.06523C6.64948 9.13293 6.82375 9.16778 6.99977 9.16778C7.17578 9.16778 7.35006 9.13293 7.51254 9.06523C7.67502 8.99754 7.82248 8.89835 7.94643 8.77338L13.6664 3.12005C13.7914 2.9961 13.8906 2.84863 13.9583 2.68615C14.026 2.52367 14.0608 2.3494 14.0608 2.17338C14.0608 1.99736 14.026 1.82309 13.9583 1.66061C13.8906 1.49813 13.7914 1.35066 13.6664 1.22671Z" fill="#1E2238"></path>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="mt-2 text-lg text-gray-500">Haute couture refers to high-end fashion design that is custom-made for individual clients and is often created by top fashion houses.</p>
                    </div>
                </div>
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="pb-6 border-b border-gray-200">
                    <div class="flex flex-wrap items-center justify-between -m-2 cursor-pointer">
                        <div class="w-auto p-2">
                            <h6 class="font-heading text-3xl">What is a fashion show?</h6>
                        </div>
                        <div class="w-auto p-2">
                            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                                <svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.6664 1.22671C13.4166 0.978378 13.0787 0.838989 12.7264 0.838989C12.3742 0.838989 12.0363 0.978378 11.7864 1.22671L6.99977 5.94671L2.27977 1.22671C2.02995 0.978378 1.69202 0.838989 1.33977 0.838989C0.987521 0.838989 0.649585 0.978378 0.399769 1.22671C0.274798 1.35066 0.175605 1.49813 0.107913 1.66061C0.0402218 1.82309 0.00537109 1.99736 0.00537109 2.17338C0.00537109 2.3494 0.0402218 2.52367 0.107913 2.68615C0.175605 2.84863 0.274798 2.9961 0.399769 3.12005L6.0531 8.77338C6.17705 8.89835 6.32452 8.99754 6.487 9.06523C6.64948 9.13293 6.82375 9.16778 6.99977 9.16778C7.17578 9.16778 7.35006 9.13293 7.51254 9.06523C7.67502 8.99754 7.82248 8.89835 7.94643 8.77338L13.6664 3.12005C13.7914 2.9961 13.8906 2.84863 13.9583 2.68615C14.026 2.52367 14.0608 2.3494 14.0608 2.17338C14.0608 1.99736 14.026 1.82309 13.9583 1.66061C13.8906 1.49813 13.7914 1.35066 13.6664 1.22671Z" fill="#1E2238"></path>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="mt-2 text-lg text-gray-500">Haute couture refers to high-end fashion design that is custom-made for individual clients and is often created by top fashion houses.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>