## 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) # Tag Category: feedback Description: Dismissible Tags ## Small Variant ### SenangStart CSS Code ```html <span id="badge-dismiss-s" layout="inline-flex items:center" space="p-x:small p-y:tiny" visual="text-size:mini font:tw-medium text:blue-800 bg:blue-100 rounded:small"> Tag S <button type="button" layout="inline-flex items:center" space="p:regular m-l:small" visual="text-size:small text:blue-400 bg:[transparent] rounded:small hover:bg:blue-200 hover:text:blue-900" aria-label="Remove"> <i class="ss ss-x-mark"></i> </button> </span> ``` ### Tailwind CSS Code ```html <span id="badge-dismiss-s" class="inline-flex items-center px-2 py-1 text-xs font-medium text-blue-800 bg-blue-100 rounded"> Tag S <button type="button" class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900" aria-label="Remove"> <i class="fas fa-times"></i> </button> </span> ``` ## Medium Variant ### SenangStart CSS Code ```html <span id="badge-dismiss-m" layout="inline-flex items:center" space="p-x:small-3x p-y:tiny-2x" visual="text-size:small font:tw-medium text:blue-800 bg:blue-100 rounded:small"> Tag M <button type="button" layout="inline-flex items:center" space="p:regular m-l:small" visual="text-size:small text:blue-400 bg:[transparent] rounded:small hover:bg:blue-200 hover:text:blue-900" aria-label="Remove"> <i class="ss ss-x-mark"></i> </button> </span> ``` ### Tailwind CSS Code ```html <span id="badge-dismiss-m" class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-800 bg-blue-100 rounded"> Tag M <button type="button" class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900" aria-label="Remove"> <i class="fas fa-times"></i> </button> </span> ``` ## Large Variant ### SenangStart CSS Code ```html <span id="badge-dismiss-l" layout="inline-flex items:center" space="p-x:medium p-y:small" visual="text-size:base font:tw-medium text:blue-800 bg:blue-100 rounded:small"> Tag L <button type="button" layout="inline-flex items:center" space="p:regular m-l:small" visual="text-size:small text:blue-400 bg:[transparent] rounded:small hover:bg:blue-200 hover:text:blue-900" aria-label="Remove"> <i class="ss ss-x-mark"></i> </button> </span> ``` ### Tailwind CSS Code ```html <span id="badge-dismiss-l" class="inline-flex items-center px-4 py-2 text-base font-medium text-blue-800 bg-blue-100 rounded"> Tag L <button type="button" class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900" aria-label="Remove"> <i class="fas fa-times"></i> </button> </span> ```