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 id="islbl" 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 id="i1g8b4" layout="grid grid-cols:1" space="m-b:large tw-lg:m-x:giant tw-lg:m-b:big-3x">
<div id="ifhpfw" layout="col-span:1">
<div id="io3zh" space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small bg:blue-600 font:tw-bold text:white">Meet QHeat</div>
</div>
<div id="ii2jm">
<h1 id="iyj0h" space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize text:blue-600 tw-lg:text-size:mega">Your New Best Friend<br /></h1>
</div>
<div id="ia8bfp" layout="flex items:center">
<p id="i7p89" space="w:[100%]" visual="text:left text-size:base font:tw-medium tw-lg:text-size:huge">Want to be that cool kid, who can explain Heat Transfer to the whole class? And solving complex problem on the board confidently? Get this brand new app that was designed for Heat Transfer learning and understanding.<br /></p>
</div>
</div>
<div id="i4q09" layout="grid tw-lg:grid-cols:2" space="g:medium">
<div id="istii" layout="flex items:center"><img id="i5f9sn" src="https://placehold.co/320x480" space="m-x:auto w:[100%] max-w:[md]" /></div>
<div id="iowf7j" layout="flex items:center">
<div id="ilv2h" layout="grid" space="g:medium">
<div id="izo6k" layout="flex col" space="p:medium tw-lg:m-r:large" visual="rounded:big border-w:regular border:blue-600">
<div id="i0lmy" layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round border-w:regular border:blue-600 text-size:huge text:blue-600">
<i id="ikqdo5" class="far fa-file-image"></i>
</div>
<h4 id="iadh3" space="m-b:small" visual="text-size:large font:tw-semibold">View Workflow.<br /></h4>
<p id="iuds9" visual="text-size:large">Learn to figuring it out by staring at the automatically generated workflow.<br /></p>
</div>
<div id="i2gaze" layout="flex col" space="p:medium tw-lg:m-l:large" visual="rounded:big border-w:regular border:blue-600">
<div id="i83zyh" layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round border-w:regular border:blue-600 text-size:huge text:blue-600">
<i id="i04wah" class="fas fa-random"></i>
</div>
<h4 id="itajj" space="m-b:small" visual="text-size:large font:tw-semibold">Shuffle Equation.<br /></h4>
<p id="ig8dk" visual="text-size:large">Alter the equation to find the solution you need most.<br /></p>
</div>
<div id="izcj4i" layout="flex col" space="p:medium tw-lg:m-r:large" visual="rounded:big border-w:regular border:blue-600">
<div id="ixb8lc" layout="flex items:center justify:center" space="m-b:medium h:big-3x w:big-3x" visual="rounded:round border-w:regular border:blue-600 text-size:huge text:blue-600">
<i id="i2sowp" class="fas fa-cube"></i>
</div>
<h4 id="i71hl" space="m-b:small" visual="text-size:large font:tw-semibold">Preset Parameters.<br /></h4>
<p id="i2cwq" visual="text-size:large">Make life easier, just pick from numbers of preset value of conductivity.<br /></p>
</div>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section id="islbl" class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div id="i1g8b4" class="mb-8 grid grid-cols-1 lg:mx-24 lg:mb-16">
<div id="ifhpfw" class="col-span-1">
<div id="io3zh" class="mb-2 max-w-max rounded-md bg-blue-600 px-2 font-bold text-white lg:mb-4">Meet QHeat</div>
</div>
<div id="ii2jm">
<h1 id="iyj0h" class="mb-2 text-2xl font-bold capitalize text-blue-600 lg:mb-4 lg:text-6xl">Your New Best Friend<br /></h1>
</div>
<div id="ia8bfp" class="flex items-center">
<p id="i7p89" class="w-full text-left text-base font-medium lg:text-2xl">Want to be that cool kid, who can explain Heat Transfer to the whole class? And solving complex problem on the board confidently? Get this brand new app that was designed for Heat Transfer learning and understanding.<br /></p>
</div>
</div>
<div id="i4q09" class="grid gap-4 lg:grid-cols-2">
<div id="istii" class="flex items-center"><img id="i5f9sn" src="https://placehold.co/320x480" class="mx-auto w-full max-w-md" /></div>
<div id="iowf7j" class="flex items-center">
<div id="ilv2h" class="grid gap-4">
<div id="izo6k" class="flex flex-col rounded-3xl border-2 border-blue-600 p-4 lg:mr-8">
<div id="i0lmy" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-blue-600 text-2xl text-blue-600">
<i id="ikqdo5" class="far fa-file-image"></i>
</div>
<h4 id="iadh3" class="mb-2 text-lg font-semibold">View Workflow.<br /></h4>
<p id="iuds9" class="text-lg">Learn to figuring it out by staring at the automatically generated workflow.<br /></p>
</div>
<div id="i2gaze" class="flex flex-col rounded-3xl border-2 border-blue-600 p-4 lg:ml-8">
<div id="i83zyh" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-blue-600 text-2xl text-blue-600">
<i id="i04wah" class="fas fa-random"></i>
</div>
<h4 id="itajj" class="mb-2 text-lg font-semibold">Shuffle Equation.<br /></h4>
<p id="ig8dk" class="text-lg">Alter the equation to find the solution you need most.<br /></p>
</div>
<div id="izcj4i" class="flex flex-col rounded-3xl border-2 border-blue-600 p-4 lg:mr-8">
<div id="ixb8lc" class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-blue-600 text-2xl text-blue-600">
<i id="i2sowp" class="fas fa-cube"></i>
</div>
<h4 id="i71hl" class="mb-2 text-lg font-semibold">Preset Parameters.<br /></h4>
<p id="i2cwq" class="text-lg">Make life easier, just pick from numbers of preset value of conductivity.<br /></p>
</div>
</div>
</div>
</div>
</section>
```