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 layout="grid tw-lg:grid-cols:3 items:start" space="g:large tw-lg:g:big">
<div layout="tw-lg:col-span:1 tw-lg:sticky tw-lg:top:giant">
<h2 space="m-b:small-3x" visual="text-size:grand tw-lg:text-size:giant font:tw-bold">Your Questions, Answered</h2>
<p space="m-b:medium-3x" visual="text:neutral-600 text-size:large">
Find quick answers to common questions about our services, products, and policies. We're here to help you get the information you need.
</p>
<a href="#contact" layout="inline-flex items:center justify:center" space="p-x:medium-2x p-y:small-3x" visual="border-w:thin text-size:base font:tw-medium rounded:small text:white bg:blue-600 hover:bg:blue-700" class="border-transparent">
Contact Support
</a>
</div>
<div layout="tw-lg:col-span:2" class="space-y-4">
<div x-data="{ isOpen: false }" layout="overflow:hidden" visual="rounded:medium">
<button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:[100%] p:medium-2x" visual="bg:neutral-100 hover:bg:neutral-200 transition:colors">
<span visual="font:tw-semibold text-size:large">How do I get started with SenangStart?</span>
<i :class="{ 'transform rotate-180': isOpen }" visual="transition:transform" class="fas fa-chevron-down"></i>
</button>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="bg:white border-w:thin border-t-w:none border:neutral-200 rounded:medium">
<p visual="text:neutral-700">
Getting started is easy! Simply browse our component library, copy the HTML code for the desired section, and paste it into your Tailwind CSS project. Ensure you have Tailwind CSS set up correctly in your environment.
</p>
</div>
</div>
<div x-data="{ isOpen: true }" layout="overflow:hidden" visual="rounded:medium">
<button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:[100%] p:medium-2x" visual="bg:neutral-100 hover:bg:neutral-200 transition:colors">
<span visual="font:tw-semibold text-size:large">Are the components customizable?</span>
<i :class="{ 'transform rotate-180': isOpen }" visual="transition:transform" class="fas fa-chevron-down"></i>
</button>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="bg:white border-w:thin border-t-w:none border:neutral-200 rounded:medium">
<p visual="text:neutral-700">
Absolutely! Since our components are built with Tailwind CSS utility classes, you can easily customize colors, spacing, typography, and more by modifying the classes directly in the HTML.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" layout="overflow:hidden" visual="rounded:medium">
<button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:[100%] p:medium-2x" visual="bg:neutral-100 hover:bg:neutral-200 transition:colors">
<span visual="font:tw-semibold text-size:large">What is the licensing for SenangStart components?</span>
<i :class="{ 'transform rotate-180': isOpen }" visual="transition:transform" class="fas fa-chevron-down"></i>
</button>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="bg:white border-w:thin border-t-w:none border:neutral-200 rounded:medium">
<p visual="text:neutral-700">
Our components are typically offered under a permissive license like MIT, allowing you to use them in personal and commercial projects freely. Always check the specific license details provided with the library.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" layout="overflow:hidden" visual="rounded:medium">
<button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:[100%] p:medium-2x" visual="bg:neutral-100 hover:bg:neutral-200 transition:colors">
<span visual="font:tw-semibold text-size:large">Do I need to know JavaScript to use these?</span>
<i :class="{ 'transform rotate-180': isOpen }" visual="transition:transform" class="fas fa-chevron-down"></i>
</button>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="bg:white border-w:thin border-t-w:none border:neutral-200 rounded:medium">
<p visual="text:neutral-700">
Many components are pure HTML/CSS. Some interactive components, like this FAQ, use Alpine.js for simplicity. Basic familiarity with Alpine.js or JavaScript can be helpful for advanced customization but isn't strictly required for basic usage.
</p>
</div>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto">
<div class="grid lg:grid-cols-3 gap-8 lg:gap-12 items-start">
<div class="lg:col-span-1 lg:sticky lg:top-24">
<h2 class="text-3xl lg:text-4xl font-bold mb-3">Your Questions, Answered</h2>
<p class="text-neutral-600 mb-6 text-lg">
Find quick answers to common questions about our services, products, and policies. We're here to help you get the information you need.
</p>
<a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
Contact Support
</a>
</div>
<div class="lg:col-span-2 space-y-4">
<div x-data="{ isOpen: false }" class="rounded-lg overflow-hidden">
<button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 bg-neutral-100 hover:bg-neutral-200 transition-colors">
<span class="font-semibold text-lg">How do I get started with SenangStart?</span>
<i :class="{ 'transform rotate-180': isOpen }" class="fas fa-chevron-down transition-transform"></i>
</button>
<div x-show="isOpen" x-collapse class="p-5 bg-white border border-t-0 border-neutral-200 rounded-b-lg">
<p class="text-neutral-700">
Getting started is easy! Simply browse our component library, copy the HTML code for the desired section, and paste it into your Tailwind CSS project. Ensure you have Tailwind CSS set up correctly in your environment.
</p>
</div>
</div>
<div x-data="{ isOpen: true }" class="rounded-lg overflow-hidden">
<button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 bg-neutral-100 hover:bg-neutral-200 transition-colors">
<span class="font-semibold text-lg">Are the components customizable?</span>
<i :class="{ 'transform rotate-180': isOpen }" class="fas fa-chevron-down transition-transform"></i>
</button>
<div x-show="isOpen" x-collapse class="p-5 bg-white border border-t-0 border-neutral-200 rounded-b-lg">
<p class="text-neutral-700">
Absolutely! Since our components are built with Tailwind CSS utility classes, you can easily customize colors, spacing, typography, and more by modifying the classes directly in the HTML.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" class="rounded-lg overflow-hidden">
<button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 bg-neutral-100 hover:bg-neutral-200 transition-colors">
<span class="font-semibold text-lg">What is the licensing for SenangStart components?</span>
<i :class="{ 'transform rotate-180': isOpen }" class="fas fa-chevron-down transition-transform"></i>
</button>
<div x-show="isOpen" x-collapse class="p-5 bg-white border border-t-0 border-neutral-200 rounded-b-lg">
<p class="text-neutral-700">
Our components are typically offered under a permissive license like MIT, allowing you to use them in personal and commercial projects freely. Always check the specific license details provided with the library.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" class="rounded-lg overflow-hidden">
<button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 bg-neutral-100 hover:bg-neutral-200 transition-colors">
<span class="font-semibold text-lg">Do I need to know JavaScript to use these?</span>
<i :class="{ 'transform rotate-180': isOpen }" class="fas fa-chevron-down transition-transform"></i>
</button>
<div x-show="isOpen" x-collapse class="p-5 bg-white border border-t-0 border-neutral-200 rounded-b-lg">
<p class="text-neutral-700">
Many components are pure HTML/CSS. Some interactive components, like this FAQ, use Alpine.js for simplicity. Basic familiarity with Alpine.js or JavaScript can be helpful for advanced customization but isn't strictly required for basic usage.
</p>
</div>
</div>
</div>
</div>
</section>
```