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 layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:large">
<div>
<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">SUCCESS STORIES</p>
</div>
<h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount">
What Our Customers Are Saying
</h2>
</div>
<div layout="flex items:center">
<p visual="text-size:large tw-lg:text-size:big">
Discover how our solutions have helped businesses like yours achieve
their goals and drive success.
</p>
</div>
</div>
<div layout="grid tw-lg:grid-cols:3" space="g:medium-3x">
<!-- Testimonial Card 1 -->
<div
layout="relative" space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:all hover:bg:blue-600 hover:text:white" class="group hover:-translate-y-2"
>
<div space="m-b:medium-3x" visual="text-size:grand text:blue-600" class="group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote space="m-b:medium-3x" visual="text-size:large">
"The implementation process was smooth and the results were beyond
our expectations. Our team's productivity has increased by 50% since
we started using the platform."
</blockquote>
<div layout="flex items:center" space="g:medium">
<img
src="https://placehold.co/60x60"
space="h:big w:big" visual="rounded:round"
alt="Customer Photo"
/>
<div>
<p visual="font:tw-bold">David Kim</p>
<p visual="text-size:small">Product Manager</p>
</div>
</div>
<div
layout="absolute bottom:medium-3x right:medium-3x" visual="text-size:giant text:blue-200 opacity:30" class="group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
<!-- Testimonial Card 2 -->
<div
layout="relative" space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:all hover:bg:blue-600 hover:text:white" class="group hover:-translate-y-2"
>
<div space="m-b:medium-3x" visual="text-size:grand text:blue-600" class="group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote space="m-b:medium-3x" visual="text-size:large">
"The analytics capabilities have transformed how we make decisions.
We're now able to spot trends and opportunities we would have missed
before."
</blockquote>
<div layout="flex items:center" space="g:medium">
<img
src="https://placehold.co/60x60"
space="h:big w:big" visual="rounded:round"
alt="Customer Photo"
/>
<div>
<p visual="font:tw-bold">Lisa Chen</p>
<p visual="text-size:small">Operations Director</p>
</div>
</div>
<div
layout="absolute bottom:medium-3x right:medium-3x" visual="text-size:giant text:blue-200 opacity:30" class="group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
<!-- Testimonial Card 3 -->
<div
layout="relative" space="p:medium-3x" visual="rounded:big bg:neutral-100 transition:all hover:bg:blue-600 hover:text:white" class="group hover:-translate-y-2"
>
<div space="m-b:medium-3x" visual="text-size:grand text:blue-600" class="group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote space="m-b:medium-3x" visual="text-size:large">
"Customer support has been exceptional. Any questions we had were
answered quickly, and the team went above and beyond to ensure our
success."
</blockquote>
<div layout="flex items:center" space="g:medium">
<img
src="https://placehold.co/60x60"
space="h:big w:big" visual="rounded:round"
alt="Customer Photo"
/>
<div>
<p visual="font:tw-bold">Mark Thompson</p>
<p visual="text-size:small">Technical Lead</p>
</div>
</div>
<div
layout="absolute bottom:medium-3x right:medium-3x" visual="text-size:giant text:blue-200 opacity:30" class="group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
</div>
<!-- Metrics -->
<div
layout="grid tw-lg:grid-cols:3" space="m-t:big g:medium-3x p:large" visual="rounded:big bg:neutral-100"
>
<div visual="text:center">
<p visual="text-size:giant font:tw-bold text:blue-600 tw-lg:text-size:mega">98%</p>
<p space="m-t:small" visual="text-size:large font:tw-semibold">Customer Satisfaction</p>
</div>
<div visual="text:center">
<p visual="text-size:giant font:tw-bold text:blue-600 tw-lg:text-size:mega">500+</p>
<p space="m-t:small" visual="text-size:large font:tw-semibold">Active Users</p>
</div>
<div visual="text:center">
<p visual="text-size:giant font:tw-bold text:blue-600 tw-lg:text-size:mega">50+</p>
<p space="m-t:small" visual="text-size:large font:tw-semibold">Countries Served</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="mb-8 grid grid-cols-1 lg:grid-cols-2">
<div>
<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">SUCCESS STORIES</p>
</div>
<h2 class="mb-4 text-3xl font-bold lg:text-5xl">
What Our Customers Are Saying
</h2>
</div>
<div class="flex items-center">
<p class="text-lg lg:text-xl">
Discover how our solutions have helped businesses like yours achieve
their goals and drive success.
</p>
</div>
</div>
<div class="grid gap-6 lg:grid-cols-3">
<!-- Testimonial Card 1 -->
<div
class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white"
>
<div class="mb-6 text-3xl text-blue-600 group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote class="mb-6 text-lg">
"The implementation process was smooth and the results were beyond
our expectations. Our team's productivity has increased by 50% since
we started using the platform."
</blockquote>
<div class="flex items-center gap-4">
<img
src="https://placehold.co/60x60"
class="h-12 w-12 rounded-full"
alt="Customer Photo"
/>
<div>
<p class="font-bold">David Kim</p>
<p class="text-sm">Product Manager</p>
</div>
</div>
<div
class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
<!-- Testimonial Card 2 -->
<div
class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white"
>
<div class="mb-6 text-3xl text-blue-600 group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote class="mb-6 text-lg">
"The analytics capabilities have transformed how we make decisions.
We're now able to spot trends and opportunities we would have missed
before."
</blockquote>
<div class="flex items-center gap-4">
<img
src="https://placehold.co/60x60"
class="h-12 w-12 rounded-full"
alt="Customer Photo"
/>
<div>
<p class="font-bold">Lisa Chen</p>
<p class="text-sm">Operations Director</p>
</div>
</div>
<div
class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
<!-- Testimonial Card 3 -->
<div
class="group relative rounded-2xl bg-neutral-100 p-6 transition-all hover:-translate-y-2 hover:bg-blue-600 hover:text-white"
>
<div class="mb-6 text-3xl text-blue-600 group-hover:text-white">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<blockquote class="mb-6 text-lg">
"Customer support has been exceptional. Any questions we had were
answered quickly, and the team went above and beyond to ensure our
success."
</blockquote>
<div class="flex items-center gap-4">
<img
src="https://placehold.co/60x60"
class="h-12 w-12 rounded-full"
alt="Customer Photo"
/>
<div>
<p class="font-bold">Mark Thompson</p>
<p class="text-sm">Technical Lead</p>
</div>
</div>
<div
class="absolute bottom-6 right-6 text-4xl text-blue-200 opacity-30 group-hover:text-white/30"
>
<i class="fas fa-quote-right"></i>
</div>
</div>
</div>
<!-- Metrics -->
<div
class="mt-12 grid gap-6 rounded-2xl bg-neutral-100 p-8 lg:grid-cols-3"
>
<div class="text-center">
<p class="text-4xl font-bold text-blue-600 lg:text-6xl">98%</p>
<p class="mt-2 text-lg font-semibold">Customer Satisfaction</p>
</div>
<div class="text-center">
<p class="text-4xl font-bold text-blue-600 lg:text-6xl">500+</p>
<p class="mt-2 text-lg font-semibold">Active Users</p>
</div>
<div class="text-center">
<p class="text-4xl font-bold text-blue-600 lg:text-6xl">50+</p>
<p class="mt-2 text-lg font-semibold">Countries Served</p>
</div>
</div>
</section>
```