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="p:large tw-lg:p:big-3x" visual="rounded:big bg:neutral-100">
<div space="m-x:auto max-w:[4xl]">
<div space="m-b:large" visual="text:center">
<span
layout="inline" space="m-b:medium p-x:medium p-y:small" visual="rounded:round bg:blue-100 text-size:small font:tw-semibold text:blue-600"
>UPGRADE NOW</span
>
<h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount">
Why Choose Premium?
</h2>
<p visual="text-size:large tw-lg:text-size:big">
Unlock advanced features and take your business to the next level.
</p>
</div>
<!-- Feature Comparison -->
<div layout="grid tw-lg:grid-cols:2" space="m-b:large g:medium">
<!-- Free Features -->
<div space="p:medium-3x" visual="rounded:medium bg:white">
<div space="m-b:medium-3x">
<h3 visual="text-size:big font:tw-bold">Free Plan</h3>
<p visual="text-size:small text:neutral-600">
Basic features for small teams
</p>
</div>
<ul space="m-b:medium-3x" class="space-y-4">
<li layout="flex items:center" space="g:small-3x">
<i visual="text:green-500" class="fas fa-check"></i>
<span>Up to 5 team members</span>
</li>
<li layout="flex items:center" space="g:small-3x">
<i visual="text:green-500" class="fas fa-check"></i>
<span>Basic analytics</span>
</li>
<li layout="flex items:center" space="g:small-3x">
<i visual="text:green-500" class="fas fa-check"></i>
<span>5GB storage</span>
</li>
<li layout="flex items:center" space="g:small-3x" visual="text:neutral-400">
<i class="fas fa-times"></i>
<span>Advanced security</span>
</li>
<li layout="flex items:center" space="g:small-3x" visual="text:neutral-400">
<i class="fas fa-times"></i>
<span>Custom integrations</span>
</li>
</ul>
<a
href="#signup"
layout="flex items:center justify:center" space="h:big w:[100%]" visual="rounded:medium border-w:regular border:neutral-200 font:tw-semibold hover:border:blue-600 hover:text:blue-600"
>
Current Plan
</a>
</div>
<!-- Premium Features -->
<div space="p:medium-3x" visual="rounded:medium bg:blue-600 text:white">
<div space="m-b:medium-3x">
<h3 visual="text-size:big font:tw-bold">Premium Plan</h3>
<p visual="text-size:small text:blue-200">
Advanced features for growing businesses
</p>
</div>
<ul space="m-b:medium-3x" class="space-y-4">
<li layout="flex items:center" space="g:small-3x">
<i class="fas fa-check"></i>
<span>Unlimited team members</span>
</li>
<li layout="flex items:center" space="g:small-3x">
<i class="fas fa-check"></i>
<span>Advanced analytics & reporting</span>
</li>
<li layout="flex items:center" space="g:small-3x">
<i class="fas fa-check"></i>
<span>Unlimited storage</span>
</li>
<li layout="flex items:center" space="g:small-3x">
<i class="fas fa-check"></i>
<span>Enterprise-grade security</span>
</li>
<li layout="flex items:center" space="g:small-3x">
<i class="fas fa-check"></i>
<span>Custom integrations & API access</span>
</li>
</ul>
<a
href="#upgrade"
layout="flex items:center justify:center" space="h:big w:[100%]" visual="rounded:medium bg:white font:tw-semibold text:blue-600" class="hover:bg-opacity-90"
>
Upgrade Now
</a>
</div>
</div>
<!-- Testimonial -->
<div
layout="flex col items:center" space="g:medium p:medium-3x" visual="rounded:medium bg:white text:center"
>
<img
src="https://placehold.co/80x80"
alt="Customer"
space="h:big-3x w:big-3x" visual="rounded:round"
/>
<blockquote visual="text-size:large italic">
"Upgrading to Premium was a game-changer for our team. The
advanced features and unlimited storage have significantly
improved our workflow."
</blockquote>
<div>
<p visual="font:tw-semibold">Sarah Johnson</p>
<p visual="text-size:small text:neutral-600">
Product Manager at TechCorp
</p>
</div>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="rounded-2xl bg-neutral-100 p-8 lg:p-16">
<div class="mx-auto max-w-4xl">
<div class="mb-8 text-center">
<span
class="mb-4 inline-block rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-600"
>UPGRADE NOW</span
>
<h2 class="mb-4 text-3xl font-bold lg:text-5xl">
Why Choose Premium?
</h2>
<p class="text-lg lg:text-xl">
Unlock advanced features and take your business to the next level.
</p>
</div>
<!-- Feature Comparison -->
<div class="mb-8 grid gap-4 lg:grid-cols-2">
<!-- Free Features -->
<div class="rounded-xl bg-white p-6">
<div class="mb-6">
<h3 class="text-xl font-bold">Free Plan</h3>
<p class="text-sm text-neutral-600">
Basic features for small teams
</p>
</div>
<ul class="mb-6 space-y-4">
<li class="flex items-center gap-3">
<i class="fas fa-check text-green-500"></i>
<span>Up to 5 team members</span>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-check text-green-500"></i>
<span>Basic analytics</span>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-check text-green-500"></i>
<span>5GB storage</span>
</li>
<li class="flex items-center gap-3 text-neutral-400">
<i class="fas fa-times"></i>
<span>Advanced security</span>
</li>
<li class="flex items-center gap-3 text-neutral-400">
<i class="fas fa-times"></i>
<span>Custom integrations</span>
</li>
</ul>
<a
href="#signup"
class="flex h-12 w-full items-center justify-center rounded-lg border-2 border-neutral-200 font-semibold hover:border-blue-600 hover:text-blue-600"
>
Current Plan
</a>
</div>
<!-- Premium Features -->
<div class="rounded-xl bg-blue-600 p-6 text-white">
<div class="mb-6">
<h3 class="text-xl font-bold">Premium Plan</h3>
<p class="text-sm text-blue-200">
Advanced features for growing businesses
</p>
</div>
<ul class="mb-6 space-y-4">
<li class="flex items-center gap-3">
<i class="fas fa-check"></i>
<span>Unlimited team members</span>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-check"></i>
<span>Advanced analytics & reporting</span>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-check"></i>
<span>Unlimited storage</span>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-check"></i>
<span>Enterprise-grade security</span>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-check"></i>
<span>Custom integrations & API access</span>
</li>
</ul>
<a
href="#upgrade"
class="flex h-12 w-full items-center justify-center rounded-lg bg-white font-semibold text-blue-600 hover:bg-opacity-90"
>
Upgrade Now
</a>
</div>
</div>
<!-- Testimonial -->
<div
class="flex flex-col items-center gap-4 rounded-xl bg-white p-6 text-center"
>
<img
src="https://placehold.co/80x80"
alt="Customer"
class="h-16 w-16 rounded-full"
/>
<blockquote class="text-lg italic">
"Upgrading to Premium was a game-changer for our team. The
advanced features and unlimited storage have significantly
improved our workflow."
</blockquote>
<div>
<p class="font-semibold">Sarah Johnson</p>
<p class="text-sm text-neutral-600">
Product Manager at TechCorp
</p>
</div>
</div>
</div>
</div>
</section>
```