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 space="m-y:large tw-lg:m-y:big-3x" visual="bg:blue-600 text:white">
<div layout="container" space="m-x:auto p-x:medium-3x p-y:big tw-lg:p-x:big-3x tw-lg:p-y:big-4x">
<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-500 text-size:small font:tw-bold uppercase">
Our Global Scale
</div>
<h2 space="m-b:small-3x tw-lg:m-b:medium" visual="text-size:grand tw-lg:text-size:mount font:tw-bold">
By The Numbers: A Global Snapshot
</h2>
<p space="max-w:[2xl] m-x:auto" visual="text-size:large tw-lg:text-size:big text:blue-100">
Discover the scope of our operations and the significant impact we're making across the world.
</p>
</div>
<div layout="grid grid-cols:1 tw-sm: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:blue-700 hover:bg:blue-500 rounded:medium text:center transition:all duration:slow" class="transform hover:scale-105">
<div space="m-b:medium" visual="text-size:giant text:blue-300">
<i class="fas fa-server"></i>
</div>
<p space="m-b:tiny" visual="text-size:giant font:tw-bold">1000s</p>
<p visual="text:blue-200">Servers Deployed</p>
</div>
<!-- Stat Item 2 -->
<div space="p:medium-3x" visual="bg:blue-700 hover:bg:blue-500 rounded:medium text:center transition:all duration:slow" class="transform hover:scale-105">
<div space="m-b:medium" visual="text-size:giant text:blue-300">
<i class="fas fa-shield-alt"></i>
</div>
<p space="m-b:tiny" visual="text-size:giant font:tw-bold">99.99%</p>
<p visual="text:blue-200">Uptime Guarantee</p>
</div>
<!-- Stat Item 3 -->
<div space="p:medium-3x" visual="bg:blue-700 hover:bg:blue-500 rounded:medium text:center transition:all duration:slow" class="transform hover:scale-105">
<div space="m-b:medium" visual="text-size:giant text:blue-300">
<i class="fas fa-headset"></i>
</div>
<p space="m-b:tiny" visual="text-size:giant font:tw-bold">24/7</p>
<p visual="text:blue-200">Expert Support</p>
</div>
<!-- Stat Item 4 -->
<div space="p:medium-3x" visual="bg:blue-700 hover:bg:blue-500 rounded:medium text:center transition:all duration:slow" class="transform hover:scale-105">
<div space="m-b:medium" visual="text-size:giant text:blue-300">
<i class="fas fa-globe-americas"></i>
</div>
<p space="m-b:tiny" visual="text-size:giant font:tw-bold">70+</p>
<p visual="text:blue-200">Data Centers Globally</p>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="bg-blue-600 text-white my-8 lg:my-16">
<div class="container mx-auto px-6 py-12 lg:px-16 lg:py-20">
<div class="text-center mb-8 lg:mb-12">
<div class="inline-block mx-auto mb-2 lg:mb-4 rounded-md bg-blue-500 px-3 py-1 text-sm font-bold uppercase">
Our Global Scale
</div>
<h2 class="text-3xl lg:text-5xl font-bold mb-3 lg:mb-4">
By The Numbers: A Global Snapshot
</h2>
<p class="text-lg lg:text-xl text-blue-100 max-w-2xl mx-auto">
Discover the scope of our operations and the significant impact we're making across the world.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
<!-- Stat Item 1 -->
<div class="bg-blue-700 hover:bg-blue-500 p-6 rounded-lg text-center transition-all duration-300 transform hover:scale-105">
<div class="text-4xl mb-4 text-blue-300">
<i class="fas fa-server"></i>
</div>
<p class="text-4xl font-bold mb-1">1000s</p>
<p class="text-blue-200">Servers Deployed</p>
</div>
<!-- Stat Item 2 -->
<div class="bg-blue-700 hover:bg-blue-500 p-6 rounded-lg text-center transition-all duration-300 transform hover:scale-105">
<div class="text-4xl mb-4 text-blue-300">
<i class="fas fa-shield-alt"></i>
</div>
<p class="text-4xl font-bold mb-1">99.99%</p>
<p class="text-blue-200">Uptime Guarantee</p>
</div>
<!-- Stat Item 3 -->
<div class="bg-blue-700 hover:bg-blue-500 p-6 rounded-lg text-center transition-all duration-300 transform hover:scale-105">
<div class="text-4xl mb-4 text-blue-300">
<i class="fas fa-headset"></i>
</div>
<p class="text-4xl font-bold mb-1">24/7</p>
<p class="text-blue-200">Expert Support</p>
</div>
<!-- Stat Item 4 -->
<div class="bg-blue-700 hover:bg-blue-500 p-6 rounded-lg text-center transition-all duration-300 transform hover:scale-105">
<div class="text-4xl mb-4 text-blue-300">
<i class="fas fa-globe-americas"></i>
</div>
<p class="text-4xl font-bold mb-1">70+</p>
<p class="text-blue-200">Data Centers Globally</p>
</div>
</div>
</div>
</section>
```