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"
x-data="{ annual: false }"
>
<div visual="text:center">
<div space="m-x:auto m-b:small w:[min-content] p-x:small p-y:tiny" visual="rounded:medium bg:blue-600">
<p visual="text-size:small font:tw-bold uppercase text:white">Pricing</p>
</div>
<h2 space="m-b:medium" visual="text-size:grand font:tw-bold capitalize tw-lg:text-size:mega">
Choose Your Perfect Plan
</h2>
<p space="m-x:auto m-b:large max-w:[2xl]" visual="text-size:large tw-lg:text-size:big">
Select the plan that best suits your needs. All plans include our core
features with different usage limits.
</p>
<div layout="flex items:center justify:center" space="m-b:large g:medium">
<span :class="{ 'text-blue-600 font-bold': !annual }">Monthly</span>
<button
@click="annual = !annual"
layout="relative" space="h:large w:big-3x" visual="rounded:round bg:blue-600 transition:colors"
:class="{ 'bg-blue-400': !annual }"
>
<span
layout="absolute left:tiny top:tiny" space="h:medium-3x w:medium-3x" visual="rounded:round bg:white transition:transform"
:class="{ 'translate-x-8': annual }"
>
</span>
</button>
<span :class="{ 'text-blue-600 font-bold': annual }">Annual</span>
<span
space="p-x:small-3x p-y:tiny" visual="rounded:round bg:green-100 text-size:small text:green-600"
>Save 20%</span
>
</div>
<div layout="grid tw-lg:grid-cols:3" space="g:large">
<!-- Starter Plan -->
<div layout="flex col" space="p:large" visual="rounded:medium border-w:regular border:neutral-200">
<h3 space="m-b:small" visual="text-size:huge font:tw-bold">Starter</h3>
<p space="m-b:medium-3x">Perfect for small businesses</p>
<div space="m-b:medium-3x">
<span
visual="text-size:giant font:tw-bold"
x-text="annual ? '$190' : '$19'"
></span>
<span visual="text:neutral-500">/month</span>
</div>
<ul space="m-b:large" class="space-y-4">
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Up to 5 users</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Basic analytics</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>24/7 support</span>
</li>
</ul>
<a
href="#"
layout="flex items:center justify:center" space="m-t:auto h:big" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white"
>Get Started</a
>
</div>
<!-- Pro Plan -->
<div
layout="flex col" space="p:large" visual="rounded:medium border-w:regular border:blue-600 bg:blue-50"
>
<div
space="m-b:medium m-t:[-big] p-x:medium p-y:tiny" visual="rounded:round bg:blue-600 text:center text-size:small font:tw-bold text:white"
>
MOST POPULAR
</div>
<h3 space="m-b:small" visual="text-size:huge font:tw-bold">Pro</h3>
<p space="m-b:medium-3x">Best for growing teams</p>
<div space="m-b:medium-3x">
<span
visual="text-size:giant font:tw-bold"
x-text="annual ? '$490' : '$49'"
></span>
<span visual="text:neutral-500">/month</span>
</div>
<ul space="m-b:large" class="space-y-4">
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Up to 20 users</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Advanced analytics</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Priority support</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Custom integrations</span>
</li>
</ul>
<a
href="#"
layout="flex items:center justify:center" space="m-t:auto h:big" visual="rounded:medium bg:blue-600 font:tw-semibold text:white hover:bg:blue-700"
>Get Started</a
>
</div>
<!-- Enterprise Plan -->
<div layout="flex col" space="p:large" visual="rounded:medium border-w:regular border:neutral-200">
<h3 space="m-b:small" visual="text-size:huge font:tw-bold">Enterprise</h3>
<p space="m-b:medium-3x">For large organizations</p>
<div space="m-b:medium-3x">
<span
visual="text-size:giant font:tw-bold"
x-text="annual ? '$990' : '$99'"
></span>
<span visual="text:neutral-500">/month</span>
</div>
<ul space="m-b:large" class="space-y-4">
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Unlimited users</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Custom analytics</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Dedicated support</span>
</li>
<li layout="flex items:center">
<i space="m-r:small" visual="text:green-500" class="fas fa-check-circle"></i>
<span>Advanced security</span>
</li>
</ul>
<a
href="#"
layout="flex items:center justify:center" space="m-t:auto h:big" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white"
>Contact Sales</a
>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section
class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"
x-data="{ annual: false }"
>
<div class="text-center">
<div class="mx-auto mb-2 w-min rounded-lg bg-blue-600 px-2 py-1">
<p class="text-sm font-bold uppercase text-white">Pricing</p>
</div>
<h2 class="mb-4 text-3xl font-bold capitalize lg:text-6xl">
Choose Your Perfect Plan
</h2>
<p class="mx-auto mb-8 max-w-2xl text-lg lg:text-xl">
Select the plan that best suits your needs. All plans include our core
features with different usage limits.
</p>
<div class="mb-8 flex items-center justify-center gap-4">
<span :class="{ 'text-blue-600 font-bold': !annual }">Monthly</span>
<button
@click="annual = !annual"
class="relative h-8 w-16 rounded-full bg-blue-600 transition-colors"
:class="{ 'bg-blue-400': !annual }"
>
<span
class="absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition-transform"
:class="{ 'translate-x-8': annual }"
>
</span>
</button>
<span :class="{ 'text-blue-600 font-bold': annual }">Annual</span>
<span
class="rounded-full bg-green-100 px-3 py-1 text-sm text-green-600"
>Save 20%</span
>
</div>
<div class="grid gap-8 lg:grid-cols-3">
<!-- Starter Plan -->
<div class="flex flex-col rounded-lg border-2 border-neutral-200 p-8">
<h3 class="mb-2 text-2xl font-bold">Starter</h3>
<p class="mb-6">Perfect for small businesses</p>
<div class="mb-6">
<span
class="text-4xl font-bold"
x-text="annual ? '$190' : '$19'"
></span>
<span class="text-neutral-500">/month</span>
</div>
<ul class="mb-8 space-y-4">
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Up to 5 users</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Basic analytics</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>24/7 support</span>
</li>
</ul>
<a
href="#"
class="mt-auto flex h-12 items-center justify-center rounded-lg border-2 border-blue-600 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white"
>Get Started</a
>
</div>
<!-- Pro Plan -->
<div
class="flex flex-col rounded-lg border-2 border-blue-600 bg-blue-50 p-8"
>
<div
class="mb-4 -mt-12 rounded-full bg-blue-600 px-4 py-1 text-center text-sm font-bold text-white"
>
MOST POPULAR
</div>
<h3 class="mb-2 text-2xl font-bold">Pro</h3>
<p class="mb-6">Best for growing teams</p>
<div class="mb-6">
<span
class="text-4xl font-bold"
x-text="annual ? '$490' : '$49'"
></span>
<span class="text-neutral-500">/month</span>
</div>
<ul class="mb-8 space-y-4">
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Up to 20 users</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Advanced analytics</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Priority support</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Custom integrations</span>
</li>
</ul>
<a
href="#"
class="mt-auto flex h-12 items-center justify-center rounded-lg bg-blue-600 font-semibold text-white hover:bg-blue-700"
>Get Started</a
>
</div>
<!-- Enterprise Plan -->
<div class="flex flex-col rounded-lg border-2 border-neutral-200 p-8">
<h3 class="mb-2 text-2xl font-bold">Enterprise</h3>
<p class="mb-6">For large organizations</p>
<div class="mb-6">
<span
class="text-4xl font-bold"
x-text="annual ? '$990' : '$99'"
></span>
<span class="text-neutral-500">/month</span>
</div>
<ul class="mb-8 space-y-4">
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Unlimited users</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Custom analytics</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Dedicated support</span>
</li>
<li class="flex items-center">
<i class="fas fa-check-circle mr-2 text-green-500"></i>
<span>Advanced security</span>
</li>
</ul>
<a
href="#"
class="mt-auto flex h-12 items-center justify-center rounded-lg border-2 border-blue-600 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white"
>Contact Sales</a
>
</div>
</div>
</div>
</section>
```