# Pricing Compare Table Category: pricing Description: Presents a clear comparison of different pricing plans and their respective features in a tabular layout. ## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

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:big" visual="text:center"> <h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mega">Compare Plans</h2> <p space="m-x:auto max-w:[2xl]" visual="text-size:large"> Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage. </p> </div> <div visual="rounded:medium border-w:thin" class="overflow-x-auto"> <table space="w:[100%] min-w:[max-content]"> <thead> <tr visual="bg:neutral-100"> <th space="p:medium" visual="text:left">Features</th> <th space="p:medium" visual="text:center">Free</th> <th space="p:medium" visual="text:center">Pro</th> <th space="p:medium" visual="text:center">Enterprise</th> </tr> </thead> <tbody> <tr class="border-t"> <td space="p:medium" visual="font:tw-semibold">Price</td> <td space="p:medium" visual="text:center">$0</td> <td space="p:medium" visual="text:center">$49/month</td> <td space="p:medium" visual="text:center">Custom</td> </tr> <tr visual="bg:neutral-50" class="border-t"> <td space="p:medium">Team members</td> <td space="p:medium" visual="text:center">Up to 3</td> <td space="p:medium" visual="text:center">Up to 20</td> <td space="p:medium" visual="text:center">Unlimited</td> </tr> <tr class="border-t"> <td space="p:medium">Storage</td> <td space="p:medium" visual="text:center">10 GB</td> <td space="p:medium" visual="text:center">100 GB</td> <td space="p:medium" visual="text:center">Unlimited</td> </tr> <tr visual="bg:neutral-50" class="border-t"> <td space="p:medium">API Access</td> <td space="p:medium" visual="text:center"> <i visual="text:red-500" class="fas fa-times"></i> </td> <td space="p:medium" visual="text:center"> <i visual="text:green-500" class="fas fa-check"></i> </td> <td space="p:medium" visual="text:center"> <i visual="text:green-500" class="fas fa-check"></i> </td> </tr> <tr class="border-t"> <td space="p:medium">Custom Domain</td> <td space="p:medium" visual="text:center"> <i visual="text:red-500" class="fas fa-times"></i> </td> <td space="p:medium" visual="text:center"> <i visual="text:green-500" class="fas fa-check"></i> </td> <td space="p:medium" visual="text:center"> <i visual="text:green-500" class="fas fa-check"></i> </td> </tr> <tr visual="bg:neutral-50" class="border-t"> <td space="p:medium">Analytics</td> <td space="p:medium" visual="text:center">Basic</td> <td space="p:medium" visual="text:center">Advanced</td> <td space="p:medium" visual="text:center">Custom</td> </tr> <tr class="border-t"> <td space="p:medium">Support</td> <td space="p:medium" visual="text:center">Community</td> <td space="p:medium" visual="text:center">Priority</td> <td space="p:medium" visual="text:center">Dedicated</td> </tr> <tr visual="bg:neutral-50" class="border-t"> <td space="p:medium"></td> <td space="p:medium" visual="text:center"> <a href="#" layout="inline" space="p-x:medium-3x p-y:small" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white" >Start Free</a > </td> <td space="p:medium" visual="text:center"> <a href="#" layout="inline" space="p-x:medium-3x p-y:small" visual="rounded:medium bg:blue-600 font:tw-semibold text:white hover:bg:blue-700" >Upgrade</a > </td> <td space="p:medium" visual="text:center"> <a href="#" layout="inline" space="p-x:medium-3x p-y:small" visual="rounded:medium border-w:regular border:blue-600 font:tw-semibold text:blue-600 hover:bg:blue-600 hover:text:white" >Contact Us</a > </td> </tr> </tbody> </table> </div> </section> ``` ## Tailwind CSS Code ```html <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="mb-12 text-center"> <h2 class="mb-4 text-3xl font-bold lg:text-6xl">Compare Plans</h2> <p class="mx-auto max-w-2xl text-lg"> Find the perfect plan for your team. All plans include unlimited projects and secure cloud storage. </p> </div> <div class="overflow-x-auto rounded-lg border"> <table class="w-full min-w-max"> <thead> <tr class="bg-neutral-100"> <th class="p-4 text-left">Features</th> <th class="p-4 text-center">Free</th> <th class="p-4 text-center">Pro</th> <th class="p-4 text-center">Enterprise</th> </tr> </thead> <tbody> <tr class="border-t"> <td class="p-4 font-semibold">Price</td> <td class="p-4 text-center">$0</td> <td class="p-4 text-center">$49/month</td> <td class="p-4 text-center">Custom</td> </tr> <tr class="border-t bg-neutral-50"> <td class="p-4">Team members</td> <td class="p-4 text-center">Up to 3</td> <td class="p-4 text-center">Up to 20</td> <td class="p-4 text-center">Unlimited</td> </tr> <tr class="border-t"> <td class="p-4">Storage</td> <td class="p-4 text-center">10 GB</td> <td class="p-4 text-center">100 GB</td> <td class="p-4 text-center">Unlimited</td> </tr> <tr class="border-t bg-neutral-50"> <td class="p-4">API Access</td> <td class="p-4 text-center"> <i class="fas fa-times text-red-500"></i> </td> <td class="p-4 text-center"> <i class="fas fa-check text-green-500"></i> </td> <td class="p-4 text-center"> <i class="fas fa-check text-green-500"></i> </td> </tr> <tr class="border-t"> <td class="p-4">Custom Domain</td> <td class="p-4 text-center"> <i class="fas fa-times text-red-500"></i> </td> <td class="p-4 text-center"> <i class="fas fa-check text-green-500"></i> </td> <td class="p-4 text-center"> <i class="fas fa-check text-green-500"></i> </td> </tr> <tr class="border-t bg-neutral-50"> <td class="p-4">Analytics</td> <td class="p-4 text-center">Basic</td> <td class="p-4 text-center">Advanced</td> <td class="p-4 text-center">Custom</td> </tr> <tr class="border-t"> <td class="p-4">Support</td> <td class="p-4 text-center">Community</td> <td class="p-4 text-center">Priority</td> <td class="p-4 text-center">Dedicated</td> </tr> <tr class="border-t bg-neutral-50"> <td class="p-4"></td> <td class="p-4 text-center"> <a href="#" class="inline-block rounded-lg border-2 border-blue-600 px-6 py-2 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white" >Start Free</a > </td> <td class="p-4 text-center"> <a href="#" class="inline-block rounded-lg bg-blue-600 px-6 py-2 font-semibold text-white hover:bg-blue-700" >Upgrade</a > </td> <td class="p-4 text-center"> <a href="#" class="inline-block rounded-lg border-2 border-blue-600 px-6 py-2 font-semibold text-blue-600 hover:bg-blue-600 hover:text-white" >Contact Us</a > </td> </tr> </tbody> </table> </div> </section> ```