## 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 Outline) Category: layout Description: Cards (Simple Outline) ## SenangStart CSS Code ```html <div layout="grid" space="p:medium-3x g:medium" visual="rounded:medium border-w:thin border:neutral-200 bg:white hover:shadow:medium transition:shadow"> <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 border border-neutral-200 bg-white hover:shadow-md transition-shadow"> <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> ```