# 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>
```