## 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) # Cards (Simple Filled) Category: layout Description: Cards (Simple) ## SenangStart CSS Code ```html <div layout="grid" space="p:medium-3x g:medium" visual="rounded:medium bg:gray-100 border-w:thin hover:border:blue-200 transition:all" class="border-transparent"> <h6 visual="text-size:base tw-lg:text-size:large capitalize font:tw-semibold text:gray-900"> Card title here... </h6> <p visual="text:gray-600"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> ``` ## Tailwind CSS Code ```html <div class="grid p-6 gap-4 rounded-lg bg-gray-100 border border-transparent hover:border-blue-200 transition-all"> <h6 class="text-base lg:text-lg capitalize font-semibold text-gray-900"> Card title here... </h6> <p class="text-gray-600"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> ```