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-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
<div space="m-b:large tw-lg:m-b:big" visual="text:center">
<div layout="inline" space="m-x:auto m-b:small tw-lg:m-b:medium p-x:small-3x p-y:tiny" visual="rounded:small bg:blue-100 text-size:small font:tw-bold uppercase text:blue-600">
Key Metrics
</div>
<h2 space="m-b:small-3x tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">
Our Achievements in Numbers
</h2>
<p space="max-w:[2xl] m-x:auto" visual="text-size:large tw-lg:text-size:big text:neutral-700">
We pride ourselves on delivering measurable results. Here's a snapshot of our impact.
</p>
</div>
<div layout="grid grid-cols:1 tw-md:grid-cols:2 tw-lg:grid-cols:4" space="g:medium-3x tw-lg:g:large">
<!-- Stat Item 1 -->
<div space="p:medium-3x" visual="bg:neutral-100 rounded:medium text:center shadow:medium hover:shadow:giant transition:shadow duration:slow">
<div layout="flex items:center justify:center" space="m-x:auto m-b:medium w:big-3x h:big-3x" visual="rounded:round bg:blue-600 text:white text-size:huge">
<i class="fas fa-users"></i>
</div>
<p space="m-b:small" visual="text-size:giant tw-lg:text-size:mount font:tw-bold text:blue-600">10k+</p>
<p visual="text:neutral-700 text-size:large">Happy Clients</p>
</div>
<!-- Stat Item 2 -->
<div space="p:medium-3x" visual="bg:neutral-100 rounded:medium text:center shadow:medium hover:shadow:giant transition:shadow duration:slow">
<div layout="flex items:center justify:center" space="m-x:auto m-b:medium w:big-3x h:big-3x" visual="rounded:round bg:blue-600 text:white text-size:huge">
<i class="fas fa-project-diagram"></i>
</div>
<p space="m-b:small" visual="text-size:giant tw-lg:text-size:mount font:tw-bold text:blue-600">500+</p>
<p visual="text:neutral-700 text-size:large">Projects Completed</p>
</div>
<!-- Stat Item 3 -->
<div space="p:medium-3x" visual="bg:neutral-100 rounded:medium text:center shadow:medium hover:shadow:giant transition:shadow duration:slow">
<div layout="flex items:center justify:center" space="m-x:auto m-b:medium w:big-3x h:big-3x" visual="rounded:round bg:blue-600 text:white text-size:huge">
<i class="fas fa-thumbs-up"></i>
</div>
<p space="m-b:small" visual="text-size:giant tw-lg:text-size:mount font:tw-bold text:blue-600">98%</p>
<p visual="text:neutral-700 text-size:large">Satisfaction Rate</p>
</div>
<!-- Stat Item 4 -->
<div space="p:medium-3x" visual="bg:neutral-100 rounded:medium text:center shadow:medium hover:shadow:giant transition:shadow duration:slow">
<div layout="flex items:center justify:center" space="m-x:auto m-b:medium w:big-3x h:big-3x" visual="rounded:round bg:blue-600 text:white text-size:huge">
<i class="fas fa-award"></i>
</div>
<p space="m-b:small" visual="text-size:giant tw-lg:text-size:mount font:tw-bold text:blue-600">15+</p>
<p visual="text:neutral-700 text-size:large">Years of Experience</p>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="text-center mb-8 lg:mb-12">
<div class="inline-block mx-auto mb-2 lg:mb-4 rounded-md bg-blue-100 px-3 py-1 text-sm font-bold uppercase text-blue-600">
Key Metrics
</div>
<h2 class="text-3xl lg:text-5xl font-bold mb-3 lg:mb-4">
Our Achievements in Numbers
</h2>
<p class="text-lg lg:text-xl text-neutral-700 max-w-2xl mx-auto">
We pride ourselves on delivering measurable results. Here's a snapshot of our impact.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
<!-- Stat Item 1 -->
<div class="bg-neutral-100 p-6 rounded-lg text-center shadow-md hover:shadow-xl transition-shadow duration-300">
<div class="flex items-center justify-center mx-auto mb-4 w-16 h-16 rounded-full bg-blue-600 text-white text-2xl">
<i class="fas fa-users"></i>
</div>
<p class="text-4xl lg:text-5xl font-bold text-blue-600 mb-2">10k+</p>
<p class="text-neutral-700 text-lg">Happy Clients</p>
</div>
<!-- Stat Item 2 -->
<div class="bg-neutral-100 p-6 rounded-lg text-center shadow-md hover:shadow-xl transition-shadow duration-300">
<div class="flex items-center justify-center mx-auto mb-4 w-16 h-16 rounded-full bg-blue-600 text-white text-2xl">
<i class="fas fa-project-diagram"></i>
</div>
<p class="text-4xl lg:text-5xl font-bold text-blue-600 mb-2">500+</p>
<p class="text-neutral-700 text-lg">Projects Completed</p>
</div>
<!-- Stat Item 3 -->
<div class="bg-neutral-100 p-6 rounded-lg text-center shadow-md hover:shadow-xl transition-shadow duration-300">
<div class="flex items-center justify-center mx-auto mb-4 w-16 h-16 rounded-full bg-blue-600 text-white text-2xl">
<i class="fas fa-thumbs-up"></i>
</div>
<p class="text-4xl lg:text-5xl font-bold text-blue-600 mb-2">98%</p>
<p class="text-neutral-700 text-lg">Satisfaction Rate</p>
</div>
<!-- Stat Item 4 -->
<div class="bg-neutral-100 p-6 rounded-lg text-center shadow-md hover:shadow-xl transition-shadow duration-300">
<div class="flex items-center justify-center mx-auto mb-4 w-16 h-16 rounded-full bg-blue-600 text-white text-2xl">
<i class="fas fa-award"></i>
</div>
<p class="text-4xl lg:text-5xl font-bold text-blue-600 mb-2">15+</p>
<p class="text-neutral-700 text-lg">Years of Experience</p>
</div>
</div>
</section>
```