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 id="iia0d1" layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
<div layout="flex col" space="g:big-3x tw-lg:g:giant-3x">
<div layout="flex col" space="tw-lg:m-x:giant">
<div layout="grid tw-lg:grid-cols:3" space="g:large tw-lg:g:big-3x">
<div layout="order:2 flex col justify:center tw-lg:order:1 tw-lg:col-span:2" space="g:medium tw-lg:g:large">
<p id="ib9e5z" visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Leverage Our Expertise in IT and Software Development</p>
<p visual="text-size:big tw-lg:text-size:huge">Benefit from our years of experience and proven track record in the industry. With a focus on innovation and collaboration, we create software that delivers real value to your business.</p>
<a href="#products" layout="flex items:center justify:center" space="h:big w:[100%] p-x:medium-3x tw-lg:max-w:[max-content]" visual="rounded:medium border-w:regular border:gray-800 text-size:large font:tw-semibold text:gray-800 hover:opacity:80">Our Works</a>
</div>
<div layout="order:1 tw-lg:order:2">
<img src="https://placehold.co/400x400" layout="object:contain" space="h:[100%] w:[100%]" />
</div>
</div>
</div>
<div layout="flex col" space="tw-lg:m-x:giant">
<div layout="grid tw-lg:grid-cols:3" space="g:large tw-lg:g:big-3x">
<div>
<img src="https://placehold.co/400x400" layout="object:contain" space="h:[100%] w:[100%]" />
</div>
<div layout="flex col justify:center tw-lg:col-span:2" space="g:medium tw-lg:g:large">
<p visual="text-size:huge font:tw-bold tw-lg:text-size:giant">Maximize Your Business Potential with Custom Software</p>
<p visual="text-size:big tw-lg:text-size:huge">Transform your ideas into reality with our custom software solutions. From startups to established companies, we help you reach new heights by optimizing processes and delivering competitive advantages.</p>
<a id="iswbtx" href="#contact" layout="flex items:center justify:center" space="h:big w:[100%] p-x:medium-3x tw-lg:max-w:[max-content]" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80">Talk To An Expert</a>
</div>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section id="iia0d1" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="flex flex-col gap-16 lg:gap-32">
<div class="flex flex-col lg:mx-24">
<div class="grid gap-8 lg:grid-cols-3 lg:gap-16">
<div class="order-2 flex flex-col justify-center gap-4 lg:order-1 lg:col-span-2 lg:gap-8">
<p id="ib9e5z" class="text-2xl font-bold lg:text-4xl">Leverage Our Expertise in IT and Software Development</p>
<p class="text-xl lg:text-2xl">Benefit from our years of experience and proven track record in the industry. With a focus on innovation and collaboration, we create software that delivers real value to your business.</p>
<a href="#products" class="flex h-12 w-full items-center justify-center rounded-lg border-2 border-gray-800 px-6 text-lg font-semibold text-gray-800 hover:opacity-80 lg:max-w-max">Our Works</a>
</div>
<div class="order-1 lg:order-2">
<img src="https://placehold.co/400x400" class="h-full w-full object-contain" />
</div>
</div>
</div>
<div class="flex flex-col lg:mx-24">
<div class="grid gap-8 lg:grid-cols-3 lg:gap-16">
<div>
<img src="https://placehold.co/400x400" class="h-full w-full object-contain" />
</div>
<div class="flex flex-col justify-center gap-4 lg:col-span-2 lg:gap-8">
<p class="text-2xl font-bold lg:text-4xl">Maximize Your Business Potential with Custom Software</p>
<p class="text-xl lg:text-2xl">Transform your ideas into reality with our custom software solutions. From startups to established companies, we help you reach new heights by optimizing processes and delivering competitive advantages.</p>
<a id="iswbtx" href="#contact" class="flex h-12 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max">Talk To An Expert</a>
</div>
</div>
</div>
</div>
</section>
```