## 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) # Links (Icon End) Category: actions Description: Links with icon at end ## Small Variant ### SenangStart CSS Code ```html <a href="#" layout="inline-flex items:center" space="g:tiny" visual="text:blue-600 text-size:small font:tw-semibold hover:text:blue-800 transition:colors">Link S </a> ``` ### Tailwind CSS Code ```html <a href="#" class="group text-blue-600 text-sm font-semibold inline-flex items-center gap-1 hover:text-blue-800 transition-colors">Link S </a> ``` ## Medium Variant ### SenangStart CSS Code ```html <a href="#" layout="inline-flex items:center" space="g:small" visual="text:blue-600 text-size:base font:tw-semibold hover:text:blue-800 transition:colors">Link M </a> ``` ### Tailwind CSS Code ```html <a href="#" class="group text-blue-600 text-base font-semibold inline-flex items-center gap-2 hover:text-blue-800 transition-colors">Link M </a> ``` ## Large Variant ### SenangStart CSS Code ```html <a href="#" layout="inline-flex items:center" space="g:small" visual="text:blue-600 text-size:large font:tw-semibold hover:text:blue-800 transition:colors">Link L </a> ``` ### Tailwind CSS Code ```html <a href="#" class="group text-blue-600 text-lg font-semibold inline-flex items-center gap-2 hover:text-blue-800 transition-colors">Link L </a> ```