# Classic Accordion Category: faq Description: Presents frequently asked questions and answers in a classic, collapsible accordion style for easy readability. ## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) ## SenangStart CSS Code ```html <section layout="container" space="p-x:medium-3x tw-lg:p-x:big-3x m-y:large tw-lg:m-y:big-3x m-x:auto" id="ioede6"> <div layout="grid grid-cols:1" space="m-b:medium tw-lg:m-b:large m-x:none tw-lg:m-x:giant"> <div> <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mega capitalize font:tw-bold">Frequently Asked Questions </h1> </div> <div layout="flex items:center"> <p space="w:[100%]" visual="text-size:big tw-lg:text-size:huge font:tw-semibold">We're sure you have questions, that's exactly why we've laid out all the answers for you here. </p> </div> </div> <div layout="flex col" space="g:medium"> <div id="i0yeej" x-data="{ isOpen: true }" layout="flex col" space="p:large g:large" visual="rounded:medium shadow:medium"> <div layout="flex items:center justify:center" space="g:medium"> <p layout="grow" visual="text-size:large font:tw-semibold">Who is SenangStart for? </p> <div id="ipc6tj" x-on:click="isOpen = !isOpen" layout="flex items:center justify:center" space="min-w:large min-h:large" visual="rounded:small bg:gray-100 cursor:pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" visual="text-size:large" id="ixn91f">SenangStart is perfect for Non-technical aspiring startup founders who are looking for a rapid development service that can help them build their Minimum Viable Product without having to go through the hassle of assembling an internal team. It’s like having a development team in your backpocket. </div> </div> <div x-data="{ isOpen: false }" layout="flex col" space="p:large g:large" visual="rounded:medium shadow:medium"> <div layout="flex items:center justify:center" space="g:medium"> <p layout="grow" visual="text-size:large font:tw-semibold">What is unique about SenangStart? </p> <div id="in8z11" x-on:click="isOpen = !isOpen" layout="flex items:center justify:center" space="min-w:large min-h:large" visual="rounded:small bg:gray-100 cursor:pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" visual="text-size:large" id="ifl1xy">Unlike most traditional software development agency, SenangStart deoesnt take charge a huge project fee and equity in exchange to build on your ideas. Our flexible monthly subscription package ensures that you keep your cost lean while having a product that you can go to market with or raise more funds for your startup. </div> </div> <div x-data="{ isOpen: false }" layout="flex col" space="p:large g:large" visual="rounded:medium shadow:medium"> <div layout="flex items:center justify:center" space="g:medium"> <p layout="grow" visual="text-size:large font:tw-semibold">What sort of MVPs can be built by SenangStart? </p> <div x-on:click="isOpen = !isOpen" layout="flex items:center justify:center" space="min-w:large min-h:large" visual="rounded:small bg:gray-100 cursor:pointer"> <i id="ieq38r" :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" visual="text-size:large">You name it, we can build it. Our solution ranges from Automation Tools, CRMs, Saas, Mobile Applications, Landing Pages, Special Calculator, Onboarding System, Learning Management System and to name a few. We will suggest what is the best solution during the consultation call with our expert. </div> </div> <div x-data="{ isOpen: false }" layout="flex col" space="p:large g:large" visual="rounded:medium shadow:medium"> <div layout="flex items:center justify:center" space="g:medium"> <p layout="grow" visual="text-size:large font:tw-semibold">What are the packages available? </p> <div id="ipn6gd" x-on:click="isOpen = !isOpen" layout="flex items:center justify:center" space="min-w:large min-h:large" visual="rounded:small bg:gray-100 cursor:pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" visual="text-size:large">We have two types of packages, namely Package A and Package B. Package A suits for founders who already have a clue of what they want to build together with the design direction. This is where we act as a appointed developer ONLY for the product. Package B, on the other hands, gives you a complete product support. We help you figure the roadmap, features , and craft out the best user experience for the product. </div> </div> </div> </section> ``` ## Tailwind CSS Code ```html <section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto" id="ioede6"> <div class="grid grid-cols-1 mb-4 lg:mb-8 mx-0 lg:mx-24"> <div> <h1 class="text-3xl lg:text-6xl capitalize font-bold mb-2 lg:mb-4">Frequently Asked Questions </h1> </div> <div class="flex items-center"> <p class="text-xl lg:text-2xl font-semibold w-full">We're sure you have questions, that's exactly why we've laid out all the answers for you here. </p> </div> </div> <div class="flex flex-col gap-4"> <div id="i0yeej" x-data="{ isOpen: true }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col"> <div class="flex gap-4 items-center justify-center"> <p class="text-lg font-semibold flex-grow">Who is SenangStart for? </p> <div id="ipc6tj" x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" class="text-lg" id="ixn91f">SenangStart is perfect for Non-technical aspiring startup founders who are looking for a rapid development service that can help them build their Minimum Viable Product without having to go through the hassle of assembling an internal team. It’s like having a development team in your backpocket. </div> </div> <div x-data="{ isOpen: false }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col"> <div class="flex gap-4 items-center justify-center"> <p class="text-lg font-semibold flex-grow">What is unique about SenangStart? </p> <div id="in8z11" x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" class="text-lg" id="ifl1xy">Unlike most traditional software development agency, SenangStart deoesnt take charge a huge project fee and equity in exchange to build on your ideas. Our flexible monthly subscription package ensures that you keep your cost lean while having a product that you can go to market with or raise more funds for your startup. </div> </div> <div x-data="{ isOpen: false }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col"> <div class="flex gap-4 items-center justify-center"> <p class="text-lg font-semibold flex-grow">What sort of MVPs can be built by SenangStart? </p> <div x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer"> <i id="ieq38r" :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" class="text-lg">You name it, we can build it. Our solution ranges from Automation Tools, CRMs, Saas, Mobile Applications, Landing Pages, Special Calculator, Onboarding System, Learning Management System and to name a few. We will suggest what is the best solution during the consultation call with our expert. </div> </div> <div x-data="{ isOpen: false }" class="rounded-lg shadow-xl p-8 gap-8 flex flex-col"> <div class="flex gap-4 items-center justify-center"> <p class="text-lg font-semibold flex-grow">What are the packages available? </p> <div id="ipn6gd" x-on:click="isOpen = !isOpen" class="min-w-8 min-h-8 rounded bg-gray-100 flex items-center justify-center cursor-pointer"> <i :class="isOpen ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas"> </i> </div> </div> <div x-show="isOpen" class="text-lg">We have two types of packages, namely Package A and Package B. Package A suits for founders who already have a clue of what they want to build together with the design direction. This is where we act as a appointed developer ONLY for the product. Package B, on the other hands, gives you a complete product support. We help you figure the roadmap, features , and craft out the best user experience for the product. </div> </div> </div> </section> ```