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:giant-2x">
<nav space="w:[100%] p:medium-3x" class="z-50" x-data="{ isOpen: false, activeMega: null }">
<div layout="container" space="m-x:auto p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter">
<div layout="flex col tw-lg:row">
<!-- Logo & Mobile Menu -->
<div layout="flex items:center" space="h:big">
<img src="https://placehold.co/120x48" space="h:[100%]" 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>
<!-- Navigation Links -->
<div :class="isOpen ? '' : 'hidden'" layout="grow col justify:end tw-lg:flex tw-lg:row tw-lg:items:center" space="p-t:medium tw-lg:p-t:none">
<div layout="relative">
<button @click="activeMega = activeMega === 'products' ? null : 'products'" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600">
Products
<i space="m-l:small" visual="text-size:small" class="fas fa-chevron-down"></i>
</button>
<!-- Mega Menu - Products -->
<div x-show="activeMega === 'products'" @click.outside="activeMega = null" layout="absolute left:none" space="m-t:small w:[100%] max-w:[tw-2xl] p:medium-3x tw-md:w:[100vw]" visual="rounded:medium bg:white shadow:giant">
<div layout="grid tw-lg:grid-cols:2" space="g:medium-3x">
<div>
<h3 space="m-b:medium" visual="text-size:large font:tw-bold">Software Solutions</h3>
<div layout="grid" space="g:medium">
<a href="#" layout="flex items:center" space="g:small-3x p:small-3x" visual="rounded:medium hover:bg:neutral-100">
<div layout="flex items:center justify:center" space="h:large-3x w:large-3x" visual="rounded:medium bg:blue-100 text:blue-600">
<i class="fas fa-desktop"></i>
</div>
<div>
<p visual="font:tw-semibold">Enterprise Suite</p>
<p visual="text-size:small text:neutral-600">Complete business management</p>
</div>
</a>
<a href="#" layout="flex items:center" space="g:small-3x p:small-3x" visual="rounded:medium hover:bg:neutral-100">
<div layout="flex items:center justify:center" space="h:large-3x w:large-3x" visual="rounded:medium bg:blue-100 text:blue-600">
<i class="fas fa-mobile-alt"></i>
</div>
<div>
<p visual="font:tw-semibold">Mobile Solutions</p>
<p visual="text-size:small text:neutral-600">Apps for iOS and Android</p>
</div>
</a>
</div>
</div>
<div>
<h3 space="m-b:medium" visual="text-size:large font:tw-bold">Services</h3>
<div layout="grid" space="g:medium">
<a href="#" layout="flex items:center" space="g:small-3x p:small-3x" visual="rounded:medium hover:bg:neutral-100">
<div layout="flex items:center justify:center" space="h:large-3x w:large-3x" visual="rounded:medium bg:blue-100 text:blue-600">
<i class="fas fa-code"></i>
</div>
<div>
<p visual="font:tw-semibold">Custom Development</p>
<p visual="text-size:small text:neutral-600">Tailored to your needs</p>
</div>
</a>
<a href="#" layout="flex items:center" space="g:small-3x p:small-3x" visual="rounded:medium hover:bg:neutral-100">
<div layout="flex items:center justify:center" space="h:large-3x w:large-3x" visual="rounded:medium bg:blue-100 text:blue-600">
<i class="fas fa-cloud"></i>
</div>
<div>
<p visual="font:tw-semibold">Cloud Services</p>
<p visual="text-size:small text:neutral-600">Scalable infrastructure</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600">Solutions</a>
<a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600">Resources</a>
<a href="#" layout="flex items:center" space="m-x:-small h:big p-x:medium-3x tw-lg:m-x:none" visual="hover:text:blue-600">Pricing</a>
<div layout="flex col tw-lg:row tw-lg:items:center" space="g:small tw-lg:m-l:medium">
<a href="#" layout="flex items:center justify:center" space="h:big p-x:medium-3x" visual="rounded:medium font:tw-semibold hover:bg:neutral-100"> Sign In </a>
<a href="#" layout="flex items:center justify:center" space="h:big p-x:medium-3x" visual="rounded:medium bg:blue-600 font:tw-semibold text:white hover:bg:blue-700"> Start Free Trial </a>
</div>
</div>
</div>
</div>
</nav>
</div>
```
## Tailwind CSS Code
```html
<div class="w-full lg:h-28">
<nav class="z-50 w-full p-6" x-data="{ isOpen: false, activeMega: null }">
<div class="container mx-auto rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter">
<div class="flex flex-col lg:flex-row">
<!-- Logo & Mobile Menu -->
<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>
<!-- Navigation Links -->
<div :class="isOpen ? '' : 'hidden'" class="flex-grow flex-col justify-end pt-4 lg:flex lg:flex-row lg:items-center lg:pt-0">
<div class="relative">
<button @click="activeMega = activeMega === 'products' ? null : 'products'" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">
Products
<i class="fas fa-chevron-down ml-2 text-sm"></i>
</button>
<!-- Mega Menu - Products -->
<div x-show="activeMega === 'products'" @click.outside="activeMega = null" class="absolute left-0 mt-2 w-full max-w-2xl rounded-lg bg-white p-6 shadow-xl md:w-screen">
<div class="grid gap-6 lg:grid-cols-2">
<div>
<h3 class="mb-4 text-lg font-bold">Software Solutions</h3>
<div class="grid gap-4">
<a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
<i class="fas fa-desktop"></i>
</div>
<div>
<p class="font-semibold">Enterprise Suite</p>
<p class="text-sm text-neutral-600">Complete business management</p>
</div>
</a>
<a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
<i class="fas fa-mobile-alt"></i>
</div>
<div>
<p class="font-semibold">Mobile Solutions</p>
<p class="text-sm text-neutral-600">Apps for iOS and Android</p>
</div>
</a>
</div>
</div>
<div>
<h3 class="mb-4 text-lg font-bold">Services</h3>
<div class="grid gap-4">
<a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
<i class="fas fa-code"></i>
</div>
<div>
<p class="font-semibold">Custom Development</p>
<p class="text-sm text-neutral-600">Tailored to your needs</p>
</div>
</a>
<a href="#" class="flex items-center gap-3 rounded-lg p-3 hover:bg-neutral-100">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
<i class="fas fa-cloud"></i>
</div>
<div>
<p class="font-semibold">Cloud Services</p>
<p class="text-sm text-neutral-600">Scalable infrastructure</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Solutions</a>
<a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Resources</a>
<a href="#" class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0">Pricing</a>
<div class="flex flex-col gap-2 lg:ml-4 lg:flex-row lg:items-center">
<a href="#" class="flex h-12 items-center justify-center rounded-lg px-6 font-semibold hover:bg-neutral-100"> Sign In </a>
<a href="#" class="flex h-12 items-center justify-center rounded-lg bg-blue-600 px-6 font-semibold text-white hover:bg-blue-700"> Start Free Trial </a>
</div>
</div>
</div>
</div>
</nav>
</div>
```