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="m-x:auto m-b:big-3x p-x:medium-3x tw-lg:p-x:big-3x">
<div layout="grid tw-lg:grid-cols:12" space="g:large">
<div layout="flex col justify:center tw-lg:col-span:5">
<div
space="m-b:small max-w:[max-content] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600"
>
<p visual="text-size:small font:tw-bold">INNOVATION</p>
</div>
<h1 space="m-b:medium" visual="text-size:giant font:tw-bold tw-lg:text-size:giga">
Build Better
<span visual="text:blue-600">Together</span>
</h1>
<p space="m-b:large" visual="text-size:big opacity:80">
Empower your team with cutting-edge collaboration tools and
innovative solutions.
</p>
<div layout="flex col tw-xl:row" space="g:medium">
<a
href="#contact"
layout="flex items:center justify:center" space="h:big-2x p-x:large" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:bg:blue-700"
>Start Project</a
>
<a
href="#learn"
layout="flex items:center justify:center" space="h:big-2x p-x:large" visual="text-size:large font:tw-semibold" class="group"
>
Learn More
<i
space="m-l:small" visual="transition:transform" class="fas fa-arrow-right transform group-hover:translate-x-2"
></i>
</a>
</div>
</div>
<div layout="tw-lg:col-span:7">
<div layout="grid tw-md:grid-cols:2" space="g:medium">
<div
space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:transform" class="group hover:-translate-y-2 aspect-square"
>
<div space="m-b:medium" visual="text-size:grand text:blue-600">
<i class="fas fa-rocket"></i>
</div>
<h3 space="m-b:small" visual="text-size:big font:tw-bold">Fast Development</h3>
<p>Launch your projects quickly with our streamlined process</p>
</div>
<div
space="p:medium-3x tw-lg:m-t:large" visual="rounded:big bg:neutral-100 transition:transform" class="group hover:-translate-y-2 aspect-square"
>
<div space="m-b:medium" visual="text-size:grand text:blue-600">
<i class="fas fa-shield-alt"></i>
</div>
<h3 space="m-b:small" visual="text-size:big font:tw-bold">Secure Platform</h3>
<p>Enterprise-grade security for your peace of mind</p>
</div>
<div
space="p:medium-3x tw-lg:m-t:[-large]" visual="rounded:big bg:neutral-100 transition:transform" class="group hover:-translate-y-2 aspect-square"
>
<div space="m-b:medium" visual="text-size:grand text:blue-600">
<i class="fas fa-users"></i>
</div>
<h3 space="m-b:small" visual="text-size:big font:tw-bold">Team Collaboration</h3>
<p>Work seamlessly with your team members</p>
</div>
<div
space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:transform" class="group hover:-translate-y-2 aspect-square"
>
<div space="m-b:medium" visual="text-size:grand text:blue-600">
<i class="fas fa-chart-line"></i>
</div>
<h3 space="m-b:small" visual="text-size:big font:tw-bold">Analytics</h3>
<p>Data-driven insights for better decisions</p>
</div>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="container mx-auto mb-16 px-6 lg:px-16">
<div class="grid gap-8 lg:grid-cols-12">
<div class="flex flex-col justify-center lg:col-span-5">
<div
class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600"
>
<p class="text-sm font-bold">INNOVATION</p>
</div>
<h1 class="mb-4 text-4xl font-bold lg:text-7xl">
Build Better
<span class="text-blue-600">Together</span>
</h1>
<p class="mb-8 text-xl opacity-80">
Empower your team with cutting-edge collaboration tools and
innovative solutions.
</p>
<div class="flex flex-col gap-4 xl:flex-row">
<a
href="#contact"
class="flex h-14 items-center justify-center rounded-lg bg-blue-600 px-8 text-lg font-semibold text-white hover:bg-blue-700"
>Start Project</a
>
<a
href="#learn"
class="group flex h-14 items-center justify-center px-8 text-lg font-semibold"
>
Learn More
<i
class="fas fa-arrow-right ml-2 transform transition-transform group-hover:translate-x-2"
></i>
</a>
</div>
</div>
<div class="lg:col-span-7">
<div class="grid gap-4 md:grid-cols-2">
<div
class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 aspect-square"
>
<div class="mb-4 text-3xl text-blue-600">
<i class="fas fa-rocket"></i>
</div>
<h3 class="mb-2 text-xl font-bold">Fast Development</h3>
<p>Launch your projects quickly with our streamlined process</p>
</div>
<div
class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 lg:mt-8 aspect-square"
>
<div class="mb-4 text-3xl text-blue-600">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="mb-2 text-xl font-bold">Secure Platform</h3>
<p>Enterprise-grade security for your peace of mind</p>
</div>
<div
class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 lg:-mt-8 aspect-square"
>
<div class="mb-4 text-3xl text-blue-600">
<i class="fas fa-users"></i>
</div>
<h3 class="mb-2 text-xl font-bold">Team Collaboration</h3>
<p>Work seamlessly with your team members</p>
</div>
<div
class="group rounded-2xl bg-neutral-100 p-6 transition-transform hover:-translate-y-2 aspect-square"
>
<div class="mb-4 text-3xl text-blue-600">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="mb-2 text-xl font-bold">Analytics</h3>
<p>Data-driven insights for better decisions</p>
</div>
</div>
</div>
</div>
</section>
```