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
<div space="w:[100%] tw-lg:h:vast">
<nav space="w:[100%] p:medium-3x" class="z-50" x-data="{ isOpen: false }">
<div layout="container" space="m-x:auto w:[100%] p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter">
<div layout="flex col tw-lg:row">
<div layout="flex items:center" space="h:big">
<img
src="https://placehold.co/120x48"
class="h-full"
alt="Logo"
/>
<div layout="grow tw-lg:hidden"></div>
<div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" layout="flex items:center justify:center tw-lg:hidden" space="w:big" visual="cursor:pointer">
<span :class="!isOpen ? '' : 'hidden'">
<i class="fas fa-bars"></i>
</span>
<span :class="isOpen ? '' : 'hidden'">
<i class="fas fa-times"></i>
</span>
</div>
</div>
<div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row" space="p-t:medium tw-lg:p-t:none">
<a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Service</a>
<a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Works</a>
<a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Insight</a>
<a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none">Support</a>
<a href="#" layout="flex items:center justify:center" space="m-x:medium m-b:medium m-t:medium h:big p-x:medium-3x tw-lg:m-b:none tw-lg:m-l:medium tw-lg:m-r:none tw-lg:m-t:none" visual="rounded:medium bg:blue-600 text:white">Contact Us</a>
</div>
</div>
<div layout="flex items:center" space="m-t:small h:large w:[100%] p-x:small p-t:small" visual="border:gray-100 text-size:small font:tw-semibold" class="border-t">
<div>
<a href=""> <i space="m-r:small" class="fas fa-chevron-left"></i> Prev </a>
</div>
<div layout="grow" visual="text:center">
<a href="" visual="underline">Back to main</a>
</div>
<div>
<a href=""> Next<i space="m-l:small" class="fas fa-chevron-right"></i> </a>
</div>
</div>
</div>
</nav>
</div>
```
## Tailwind CSS Code
```html
<div class="w-full lg:h-40">
<nav class="z-50 w-full p-6" x-data="{ isOpen: false }">
<div class="container mx-auto w-full rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter">
<div class="flex flex-col lg:flex-row">
<div class="flex h-12 items-center">
<img
src="https://placehold.co/120x48"
class="h-full"
alt="Logo"
/>
<div class="flex-grow lg:hidden"></div>
<div x-on:click="isOpen = !isOpen" x-on:click.outside="isOpen = false" class="flex w-12 cursor-pointer items-center justify-center lg:hidden">
<span :class="!isOpen ? '' : 'hidden'">
<i class="fas fa-bars"></i>
</span>
<span :class="isOpen ? '' : 'hidden'">
<i class="fas fa-times"></i>
</span>
</div>
</div>
<div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:pt-0">
<a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Service</a>
<a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Works</a>
<a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Insight</a>
<a href="#" class="-mx-2 flex h-12 items-center px-6 lg:mx-0">Support</a>
<a href="#" class="mx-4 mb-4 mt-4 flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 text-white lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0">Contact Us</a>
</div>
</div>
<div class="mt-2 flex h-8 w-full items-center border-t border-gray-100 px-2 pt-2 text-sm font-semibold">
<div>
<a href=""> <i class="fas fa-chevron-left mr-2"></i> Prev </a>
</div>
<div class="flex-grow text-center">
<a href="" class="underline">Back to main</a>
</div>
<div>
<a href=""> Next<i class="fas fa-chevron-right ml-2"></i> </a>
</div>
</div>
</div>
</nav>
</div>
```