Hello SenangStart!
Zero config, instant styling.
```
**Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html)
## SenangStart CSS Code
```html
<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
<div
layout="relative grid grid-cols:1 overflow:hidden tw-lg:grid-cols:3" space="g:medium p:medium tw-lg:p-x:big-3x tw-lg:p-y:big" visual="rounded:medium bg:gray-200"
style="
background-image: url('https://placehold.co/1200x400/2563EB/FFFFFF');
background-size: cover;
background-position: center;
"
>
<div layout="col-span:1 flex col justify:center tw-lg:col-span:2">
<h1 space="m-b:small" visual="text-size:huge font:tw-semibold capitalize tw-lg:text-size:mega tw-lg:font:tw-bold">Download Our Profile</h1>
<p space="m-b:medium w:[100%] tw-lg:m-b:large" visual="text-size:base font:tw-semibold opacity:70 tw-lg:text-size:huge">Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below.</p>
<div layout="flex" space="m-b:medium tw-lg:m-b:large">
<div layout="relative overflow:hidden" space="m-r:medium h:big w:big" visual="rounded:round bg:gray-200">
<img src="https://placehold.co/48x48" layout="absolute left:none top:none" space="w:big" />
</div>
<div layout="flex col justify:center" visual="font:tw-semibold">
<p visual="text-size:small">Hamdan</p>
<p visual="text-size:mini">Engineering Consultant</p>
</div>
</div>
<a href="#" layout="flex items:center justify:center" space="p-x:large p-y:small-3x tw-lg:max-w:[max-content]" visual="rounded:medium bg:white text:center font:tw-semibold text:blue-600 tw-lg:text-size:large">Download Now</a>
</div>
<div layout="hidden tw-lg:flex" class="justify-right"></div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div
class="relative grid grid-cols-1 gap-4 overflow-hidden rounded-lg bg-gray-200 p-4 lg:grid-cols-3 lg:px-16 lg:py-12"
style="
background-image: url('https://placehold.co/1200x400/2563EB/FFFFFF');
background-size: cover;
background-position: center;
"
>
<div class="col-span-1 flex flex-col justify-center lg:col-span-2">
<h1 class="mb-2 text-2xl font-semibold capitalize lg:text-6xl lg:font-bold">Download Our Profile</h1>
<p class="mb-4 w-full text-base font-semibold opacity-70 lg:mb-8 lg:text-2xl">Want to see if we are a good fit your next App or System project? Download our profile by clicking the button below.</p>
<div class="mb-4 flex lg:mb-8">
<div class="relative mr-4 h-12 w-12 overflow-hidden rounded-full bg-gray-200">
<img src="https://placehold.co/48x48" class="absolute left-0 top-0 w-12" />
</div>
<div class="flex flex-col justify-center font-semibold">
<p class="text-sm">Hamdan</p>
<p class="text-xs">Engineering Consultant</p>
</div>
</div>
<a href="#" class="flex items-center justify-center rounded-lg bg-white px-8 py-3 text-center font-semibold text-blue-600 lg:max-w-max lg:text-lg">Download Now</a>
</div>
<div class="justify-right hidden lg:flex"></div>
</div>
</section>
```