## 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>
```