## 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) # Rating Category: forms Description: Star Rating ## Small Variant ### SenangStart CSS Code ```html <div layout="flex items:center" class="space-x-1"> <i visual="text:yellow-400 text-size:small" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:small" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:small" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:small" class="ss ss-star"></i> <i visual="text:gray-300 text-size:small" class="ss ss-star"></i> </div> ``` ### Tailwind CSS Code ```html <div class="flex items-center space-x-1"> <i class="fas fa-star text-yellow-400 text-sm"></i> <i class="fas fa-star text-yellow-400 text-sm"></i> <i class="fas fa-star text-yellow-400 text-sm"></i> <i class="fas fa-star text-yellow-400 text-sm"></i> <i class="fas fa-star text-gray-300 text-sm"></i> </div> ``` ## Medium Variant ### SenangStart CSS Code ```html <div layout="flex items:center" class="space-x-1"> <i visual="text:yellow-400 text-size:large" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:large" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:large" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:large" class="ss ss-star"></i> <i visual="text:gray-300 text-size:large" class="ss ss-star"></i> </div> ``` ### Tailwind CSS Code ```html <div class="flex items-center space-x-1"> <i class="fas fa-star text-yellow-400 text-lg"></i> <i class="fas fa-star text-yellow-400 text-lg"></i> <i class="fas fa-star text-yellow-400 text-lg"></i> <i class="fas fa-star text-yellow-400 text-lg"></i> <i class="fas fa-star text-gray-300 text-lg"></i> </div> ``` ## Large Variant ### SenangStart CSS Code ```html <div layout="flex items:center" class="space-x-1"> <i visual="text:yellow-400 text-size:huge" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:huge" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:huge" class="ss ss-star"></i> <i visual="text:yellow-400 text-size:huge" class="ss ss-star"></i> <i visual="text:gray-300 text-size:huge" class="ss ss-star"></i> </div> ``` ### Tailwind CSS Code ```html <div class="flex items-center space-x-1"> <i class="fas fa-star text-yellow-400 text-2xl"></i> <i class="fas fa-star text-yellow-400 text-2xl"></i> <i class="fas fa-star text-yellow-400 text-2xl"></i> <i class="fas fa-star text-yellow-400 text-2xl"></i> <i class="fas fa-star text-gray-300 text-2xl"></i> </div> ```