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">
<div space="m-b:big" visual="text:center">
<span visual="text:blue-600 font:tw-semibold uppercase" class="tracking-wide">FAQs</span>
<h2 space="m-t:small" visual="text-size:grand font:tw-extrabold text:neutral-900 tw-sm:text-size:giant" class="leading-8 tracking-tight">
Common Questions
</h2>
</div>
<div space="max-w:[3xl] m-x:auto">
<dl class="space-y-8">
<div x-data="{ open: false }" space="p-t:medium-3x">
<dt visual="text-size:large">
<button @click="open = !open" layout="flex justify:between items:start" space="w:[100%]" visual="text:left text:neutral-400 focus:outline:none focus:text:neutral-900">
<span visual="font:tw-medium text:neutral-900">
What version of Tailwind CSS is required?
</span>
<span layout="flex items:center" space="m-l:medium-3x h:medium-4x">
<i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i>
</span>
</button>
</dt>
<dd x-show="open" x-collapse space="m-t:small p-r:big">
<p visual="text-size:base text:neutral-500">
We build and test our components with the latest stable version of Tailwind CSS (v3.x). While some components might work with older versions, we recommend using Tailwind CSS v3.0 or newer for full compatibility and access to the latest features.
</p>
</dd>
</div>
<div x-data="{ open: true }" space="p-t:medium-3x" visual="border:neutral-200" class="border-t">
<dt visual="text-size:large">
<button @click="open = !open" layout="flex justify:between items:start" space="w:[100%]" visual="text:left text:neutral-400 focus:outline:none focus:text:neutral-900">
<span visual="font:tw-medium text:neutral-900">
How do I handle responsiveness?
</span>
<span layout="flex items:center" space="m-l:medium-3x h:medium-4x">
<i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i>
</span>
</button>
</dt>
<dd x-show="open" x-collapse space="m-t:small p-r:big">
<p visual="text-size:base text:neutral-500">
All SenangStart components are designed to be responsive out-of-the-box using Tailwind's responsive prefixes (sm:, md:, lg:, xl:). You can further customize the responsive behavior by adjusting these utility classes as needed for your specific design requirements.
</p>
</dd>
</div>
<div x-data="{ open: false }" space="p-t:medium-3x" visual="border:neutral-200" class="border-t">
<dt visual="text-size:large">
<button @click="open = !open" layout="flex justify:between items:start" space="w:[100%]" visual="text:left text:neutral-400 focus:outline:none focus:text:neutral-900">
<span visual="font:tw-medium text:neutral-900">
Can I request new components or features?
</span>
<span layout="flex items:center" space="m-l:medium-3x h:medium-4x">
<i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i>
</span>
</button>
</dt>
<dd x-show="open" x-collapse space="m-t:small p-r:big">
<p visual="text-size:base text:neutral-500">
Yes, absolutely! We value community feedback. You can submit feature requests or ideas through our GitHub issues page or by contacting us directly. We prioritize requests based on demand and alignment with the library's goals.
</p>
</dd>
</div>
<div x-data="{ open: false }" space="p-t:medium-3x" visual="border:neutral-200" class="border-t">
<dt visual="text-size:large">
<button @click="open = !open" layout="flex justify:between items:start" space="w:[100%]" visual="text:left text:neutral-400 focus:outline:none focus:text:neutral-900">
<span visual="font:tw-medium text:neutral-900">
Are the icons included?
</span>
<span layout="flex items:center" space="m-l:medium-3x h:medium-4x">
<i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i>
</span>
</button>
</dt>
<dd x-show="open" x-collapse space="m-t:small p-r:big">
<p visual="text-size:base text:neutral-500">
We use Font Awesome for icons in our examples for broad recognition. You'll need to include Font Awesome (or your preferred icon library like Heroicons, Lucide, etc.) in your project separately. The HTML structure makes it easy to swap icon sets.
</p>
</dd>
</div>
</dl>
</div>
<div space="m-t:large-3x" visual="text:center">
<a href="#" visual="text-size:base font:tw-medium text:blue-600 hover:text:blue-500"> Still have questions? Contact us </a>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="text-center mb-12">
<span class="text-blue-600 font-semibold tracking-wide uppercase">FAQs</span>
<h2 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-neutral-900 sm:text-4xl">
Common Questions
</h2>
</div>
<div class="max-w-3xl mx-auto">
<dl class="space-y-8">
<div x-data="{ open: false }" class="pt-6">
<dt class="text-lg">
<button @click="open = !open" class="text-left w-full flex justify-between items-start text-neutral-400 focus:outline-none focus:text-neutral-900">
<span class="font-medium text-neutral-900">
What version of Tailwind CSS is required?
</span>
<span class="ml-6 h-7 flex items-center">
<i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i>
</span>
</button>
</dt>
<dd x-show="open" x-collapse class="mt-2 pr-12">
<p class="text-base text-neutral-500">
We build and test our components with the latest stable version of Tailwind CSS (v3.x). While some components might work with older versions, we recommend using Tailwind CSS v3.0 or newer for full compatibility and access to the latest features.
</p>
</dd>
</div>
<div x-data="{ open: true }" class="pt-6 border-t border-neutral-200">
<dt class="text-lg">
<button @click="open = !open" class="text-left w-full flex justify-between items-start text-neutral-400 focus:outline-none focus:text-neutral-900">
<span class="font-medium text-neutral-900">
How do I handle responsiveness?
</span>
<span class="ml-6 h-7 flex items-center">
<i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i>
</span>
</button>
</dt>
<dd x-show="open" x-collapse class="mt-2 pr-12">
<p class="text-base text-neutral-500">
All SenangStart components are designed to be responsive out-of-the-box using Tailwind's responsive prefixes (sm:, md:, lg:, xl:). You can further customize the responsive behavior by adjusting these utility classes as needed for your specific design requirements.
</p>
</dd>
</div>
<div x-data="{ open: false }" class="pt-6 border-t border-neutral-200">
<dt class="text-lg">
<button @click="open = !open" class="text-left w-full flex justify-between items-start text-neutral-400 focus:outline-none focus:text-neutral-900">
<span class="font-medium text-neutral-900">
Can I request new components or features?
</span>
<span class="ml-6 h-7 flex items-center">
<i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i>
</span>
</button>
</dt>
<dd x-show="open" x-collapse class="mt-2 pr-12">
<p class="text-base text-neutral-500">
Yes, absolutely! We value community feedback. You can submit feature requests or ideas through our GitHub issues page or by contacting us directly. We prioritize requests based on demand and alignment with the library's goals.
</p>
</dd>
</div>
<div x-data="{ open: false }" class="pt-6 border-t border-neutral-200">
<dt class="text-lg">
<button @click="open = !open" class="text-left w-full flex justify-between items-start text-neutral-400 focus:outline-none focus:text-neutral-900">
<span class="font-medium text-neutral-900">
Are the icons included?
</span>
<span class="ml-6 h-7 flex items-center">
<i class="fas" :class="{ 'fa-chevron-up': open, 'fa-chevron-down': !open }"></i>
</span>
</button>
</dt>
<dd x-show="open" x-collapse class="mt-2 pr-12">
<p class="text-base text-neutral-500">
We use Font Awesome for icons in our examples for broad recognition. You'll need to include Font Awesome (or your preferred icon library like Heroicons, Lucide, etc.) in your project separately. The HTML structure makes it easy to swap icon sets.
</p>
</dd>
</div>
</dl>
</div>
<div class="mt-10 text-center">
<a href="#" class="text-base font-medium text-blue-600 hover:text-blue-500"> Still have questions? Contact us </a>
</div>
</section>
```