## 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) # Badge Category: feedback Description: Status Badges ## Small Variant ### SenangStart CSS Code ```html <span space="p-x:small-2x p-y:regular" visual="bg:blue-100 text:blue-800 text-size:mini font:tw-medium rounded:small">Badge S</span> ``` ### Tailwind CSS Code ```html <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Badge S</span> ``` ## Medium Variant ### SenangStart CSS Code ```html <span space="p-x:small-3x p-y:tiny" visual="bg:blue-100 text:blue-800 text-size:small font:tw-medium rounded:small">Badge M</span> ``` ### Tailwind CSS Code ```html <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">Badge M</span> ``` ## Large Variant ### SenangStart CSS Code ```html <span space="p-x:small-4x p-y:tiny-2x" visual="bg:blue-100 text:blue-800 text-size:base font:tw-medium rounded:small">Badge L</span> ``` ### Tailwind CSS Code ```html <span class="bg-blue-100 text-blue-800 text-base font-medium px-3.5 py-1.5 rounded">Badge L</span> ```