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, isSearchOpen: false }"
>
<div
layout="container flex col tw-lg:row" space="m-x:auto p:small" visual="rounded:medium bg:white" class="bg-opacity-80 backdrop-blur backdrop-filter"
>
<!-- 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"
>
<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"
>Home</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"
>Products</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"
>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"
>About</a
>
<!-- Search Bar -->
<div layout="relative hidden tw-lg:block" space="m-x:medium">
<input
type="text"
placeholder="Search..."
space="w:vast-3x p-x:medium p-y:small p-l:large-3x" visual="rounded:medium border-w:thin border:neutral-200 focus:border:blue-600 focus:outline:none"
/>
<i
layout="absolute left:small-3x top:small-3x" visual="text:neutral-400" class="fas fa-search"
></i>
</div>
<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 hover:bg:blue-700"
>
Get Started
</a>
</div>
</div>
</nav>
</div>
```
## Tailwind CSS Code
```html
<div class="w-full lg:h-28">
<nav
class="w-full p-6 z-50"
x-data="{ isOpen: false, isSearchOpen: false }"
>
<div
class="container mx-auto flex flex-col rounded-lg bg-white bg-opacity-80 p-2 backdrop-blur backdrop-filter 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"
>
<a
href="#"
class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
>Home</a
>
<a
href="#"
class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
>Products</a
>
<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"
>About</a
>
<!-- Search Bar -->
<div class="relative mx-4 hidden lg:block">
<input
type="text"
placeholder="Search..."
class="w-48 rounded-lg border border-neutral-200 px-4 py-2 pl-10 focus:border-blue-600 focus:outline-none"
/>
<i
class="fas fa-search absolute left-3 top-3 text-neutral-400"
></i>
</div>
<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 hover:bg-blue-700 lg:mb-0 lg:ml-4 lg:mr-0 lg:mt-0"
>
Get Started
</a>
</div>
</div>
</nav>
</div>
```