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:large tw-lg:m-b:big" visual="text:center">
<div layout="inline" space="p-x:small-3x p-y:tiny m-b:medium" visual="bg:blue-100 text:blue-600 text-size:small font:tw-semibold rounded:round">
SUPPORT
</div>
<h1 space="m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">Frequently Asked Questions</h1>
<p space="max-w:[2xl] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-600">
Have questions? We've got answers. Explore our FAQ to find solutions to common queries.
</p>
</div>
<div layout="grid tw-md:grid-cols:2" space="g:medium-3x max-w:[4xl] m-x:auto">
<div x-data="{ isOpen: false }" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200">
<button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:[100%] p:medium-2x" visual="text:left font:tw-semibold">
What is SenangStart?
<i :class="isOpen ? 'fa-minus' : 'fa-plus'" visual="text:blue-600" class="fas"></i>
</button>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:neutral-200 text:neutral-700" class="border-t">
SenangStart is a UI library built with Tailwind CSS, designed to help developers and designers create beautiful, responsive websites quickly and easily. It includes a variety of pre-built components and sections.
</div>
</div>
<div x-data="{ isOpen: false }" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200">
<button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:[100%] p:medium-2x" visual="text:left font:tw-semibold">
Who can use these components?
<i :class="isOpen ? 'fa-minus' : 'fa-plus'" visual="text:blue-600" class="fas"></i>
</button>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:neutral-200 text:neutral-700" class="border-t">
Our components are for anyone building websites with Tailwind CSS. This includes freelance developers, agencies, and product teams looking to accelerate their workflow.
</div>
</div>
<div x-data="{ isOpen: true }" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200">
<button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:[100%] p:medium-2x" visual="text:left font:tw-semibold">
Is there a Figma file available?
<i :class="isOpen ? 'fa-minus' : 'fa-plus'" visual="text:blue-600" class="fas"></i>
</button>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:neutral-200 text:neutral-700" class="border-t">
Yes, we plan to release a comprehensive Figma design kit that complements our Tailwind CSS components. Stay tuned for updates on its availability!
</div>
</div>
<div x-data="{ isOpen: false }" visual="bg:neutral-50 rounded:medium border-w:thin border:neutral-200">
<button @click="isOpen = !isOpen" layout="flex justify:between items:center" space="w:[100%] p:medium-2x" visual="text:left font:tw-semibold">
What about updates and support?
<i :class="isOpen ? 'fa-minus' : 'fa-plus'" visual="text:blue-600" class="fas"></i>
</button>
<div x-show="isOpen" x-collapse space="p:medium-2x" visual="border:neutral-200 text:neutral-700" class="border-t">
We regularly update SenangStart with new components and features. Support is available through our community channels and dedicated support for premium users.
</div>
</div>
</div>
<div space="m-t:big" visual="text:center">
<p visual="text-size:large text:neutral-600">Can't find your answer? <a href="#contact" visual="text:blue-600 font:tw-semibold hover:underline">Contact our support team</a>.</p>
</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-8 lg:mb-12">
<div class="inline-block bg-blue-100 text-blue-600 text-sm font-semibold px-3 py-1 rounded-full mb-4">
SUPPORT
</div>
<h1 class="text-3xl lg:text-5xl font-bold mb-4">Frequently Asked Questions</h1>
<p class="text-lg lg:text-xl text-neutral-600 max-w-2xl mx-auto">
Have questions? We've got answers. Explore our FAQ to find solutions to common queries.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<div x-data="{ isOpen: false }" class="bg-neutral-50 rounded-lg border border-neutral-200">
<button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 text-left font-semibold">
What is SenangStart?
<i :class="isOpen ? 'fa-minus' : 'fa-plus'" class="fas text-blue-600"></i>
</button>
<div x-show="isOpen" x-collapse class="p-5 border-t border-neutral-200 text-neutral-700">
SenangStart is a UI library built with Tailwind CSS, designed to help developers and designers create beautiful, responsive websites quickly and easily. It includes a variety of pre-built components and sections.
</div>
</div>
<div x-data="{ isOpen: false }" class="bg-neutral-50 rounded-lg border border-neutral-200">
<button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 text-left font-semibold">
Who can use these components?
<i :class="isOpen ? 'fa-minus' : 'fa-plus'" class="fas text-blue-600"></i>
</button>
<div x-show="isOpen" x-collapse class="p-5 border-t border-neutral-200 text-neutral-700">
Our components are for anyone building websites with Tailwind CSS. This includes freelance developers, agencies, and product teams looking to accelerate their workflow.
</div>
</div>
<div x-data="{ isOpen: true }" class="bg-neutral-50 rounded-lg border border-neutral-200">
<button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 text-left font-semibold">
Is there a Figma file available?
<i :class="isOpen ? 'fa-minus' : 'fa-plus'" class="fas text-blue-600"></i>
</button>
<div x-show="isOpen" x-collapse class="p-5 border-t border-neutral-200 text-neutral-700">
Yes, we plan to release a comprehensive Figma design kit that complements our Tailwind CSS components. Stay tuned for updates on its availability!
</div>
</div>
<div x-data="{ isOpen: false }" class="bg-neutral-50 rounded-lg border border-neutral-200">
<button @click="isOpen = !isOpen" class="w-full flex justify-between items-center p-5 text-left font-semibold">
What about updates and support?
<i :class="isOpen ? 'fa-minus' : 'fa-plus'" class="fas text-blue-600"></i>
</button>
<div x-show="isOpen" x-collapse class="p-5 border-t border-neutral-200 text-neutral-700">
We regularly update SenangStart with new components and features. Support is available through our community channels and dedicated support for premium users.
</div>
</div>
</div>
<div class="text-center mt-12">
<p class="text-lg text-neutral-600">Can't find your answer? <a href="#contact" class="text-blue-600 font-semibold hover:underline">Contact our support team</a>.</p>
</div>
</section>
```