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 p-y:big tw-lg:p-y:big-4x" visual="bg:blue-600 text:white rounded:medium">
<div space="m-b:large tw-lg:m-b:big max-w:[3xl] m-x:auto" visual="text:center">
<h1 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Got Questions? We've Got Answers!</h1>
<p visual="text-size:large tw-lg:text-size:big text:blue-100">
We've compiled a list of the most common questions. If you don't find what you're looking for, feel free to reach out.
</p>
</div>
<div space="max-w:[3xl] m-x:auto" class="space-y-3">
<div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium">
<h2 @click="isOpen = !isOpen" visual="cursor:pointer">
<button type="button" layout="flex items:center justify:between" space="w:[100%] p:medium-2x" visual="font:tw-medium text:left">
<span>Is SenangStart free to use?</span>
<i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i>
</button>
</h2>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t">
<p visual="text:blue-50">
Yes, many of our core components and sections are free to use. We may offer premium templates or advanced kits in the future, but the foundational library aims to be accessible.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium">
<h2 @click="isOpen = !isOpen" visual="cursor:pointer">
<button type="button" layout="flex items:center justify:between" space="w:[100%] p:medium-2x" visual="font:tw-medium text:left">
<span>What browsers are supported?</span>
<i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i>
</button>
</h2>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t">
<p visual="text:blue-50">
Our components are designed to work on all modern browsers, including Chrome, Firefox, Safari, and Edge. We strive for broad compatibility.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium">
<h2 @click="isOpen = !isOpen" visual="cursor:pointer">
<button type="button" layout="flex items:center justify:between" space="w:[100%] p:medium-2x" visual="font:tw-medium text:left">
<span>Can I contribute to SenangStart?</span>
<i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i>
</button>
</h2>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t">
<p visual="text:blue-50">
We welcome contributions! If you have ideas for new components or improvements, please check our GitHub repository for contribution guidelines or get in touch with our team.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" visual="bg:blue-700 rounded:medium">
<h2 @click="isOpen = !isOpen" visual="cursor:pointer">
<button type="button" layout="flex items:center justify:between" space="w:[100%] p:medium-2x" visual="font:tw-medium text:left">
<span>How often is the library updated?</span>
<i visual="transition:transform duration:normal" class="fas fa-chevron-right" :class="{':'transform rotate-90': isOpen}"></i>
</button>
</h2>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:blue-800" class="border-t">
<p visual="text:blue-50">
We aim to release updates regularly, including new components, bug fixes, and enhancements based on user feedback and evolving design trends.
</p>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="px-6 lg:px-16 my-8 lg:my-16 container mx-auto bg-blue-600 text-white rounded-xl py-12 lg:py-20">
<div class="text-center mb-8 lg:mb-12 max-w-3xl mx-auto">
<h1 class="text-3xl lg:text-5xl font-bold mb-4">Got Questions? We've Got Answers!</h1>
<p class="text-lg lg:text-xl text-blue-100">
We've compiled a list of the most common questions. If you don't find what you're looking for, feel free to reach out.
</p>
</div>
<div class="space-y-3 max-w-3xl mx-auto">
<div x-data="{ isOpen: false }" class="bg-blue-700 rounded-lg">
<h2 @click="isOpen = !isOpen" class="cursor-pointer">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left">
<span>Is SenangStart free to use?</span>
<i class="fas fa-chevron-right transition-transform duration-200" :class="{':'transform rotate-90': isOpen}"></i>
</button>
</h2>
<div x-show="isOpen" x-collapse class="p-5 border-t border-blue-800">
<p class="text-blue-50">
Yes, many of our core components and sections are free to use. We may offer premium templates or advanced kits in the future, but the foundational library aims to be accessible.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" class="bg-blue-700 rounded-lg">
<h2 @click="isOpen = !isOpen" class="cursor-pointer">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left">
<span>What browsers are supported?</span>
<i class="fas fa-chevron-right transition-transform duration-200" :class="{':'transform rotate-90': isOpen}"></i>
</button>
</h2>
<div x-show="isOpen" x-collapse class="p-5 border-t border-blue-800">
<p class="text-blue-50">
Our components are designed to work on all modern browsers, including Chrome, Firefox, Safari, and Edge. We strive for broad compatibility.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" class="bg-blue-700 rounded-lg">
<h2 @click="isOpen = !isOpen" class="cursor-pointer">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left">
<span>Can I contribute to SenangStart?</span>
<i class="fas fa-chevron-right transition-transform duration-200" :class="{':'transform rotate-90': isOpen}"></i>
</button>
</h2>
<div x-show="isOpen" x-collapse class="p-5 border-t border-blue-800">
<p class="text-blue-50">
We welcome contributions! If you have ideas for new components or improvements, please check our GitHub repository for contribution guidelines or get in touch with our team.
</p>
</div>
</div>
<div x-data="{ isOpen: false }" class="bg-blue-700 rounded-lg">
<h2 @click="isOpen = !isOpen" class="cursor-pointer">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium text-left">
<span>How often is the library updated?</span>
<i class="fas fa-chevron-right transition-transform duration-200" :class="{':'transform rotate-90': isOpen}"></i>
</button>
</h2>
<div x-show="isOpen" x-collapse class="p-5 border-t border-blue-800">
<p class="text-blue-50">
We aim to release updates regularly, including new components, bug fixes, and enhancements based on user feedback and evolving design trends.
</p>
</div>
</div>
</div>
</section>
```