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 }">
<!-- Announcement Bar -->
<div layout="container" space="m-x:auto m-b:medium">
<div
layout="flex items:center justify:between" space="p-x:medium p-y:small" visual="rounded:medium bg:blue-600 text:white"
>
<p visual="text-size:small">
🎉 New Feature Alert: Try our AI-powered analytics -
<a href="#" visual="underline hover:text:blue-200">Learn More</a>
</p>
<div layout="hidden tw-lg:flex tw-lg:items:center" space="tw-lg:g:medium">
<a href="#" visual="text-size:small hover:text:blue-200">
<i class="fab fa-twitter"></i>
</a>
<a href="#" visual="text-size:small hover:text:blue-200">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" visual="text-size:small hover:text:blue-200">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
<!-- Main Navigation -->
<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"
>
<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"
>Dashboard</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"
>Analytics</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"
>Reports</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"
>Team</a
>
<!-- User Menu -->
<div layout="relative" space="m-l:medium">
<button
layout="flex items:center" space="g:small p-x:medium p-y:small" visual="rounded:medium hover:bg:neutral-100"
>
<img
src="https://placehold.co/32x32"
space="h:large w:large" visual="rounded:round"
alt="User"
/>
<span visual="font:tw-semibold">John Doe</span>
<i visual="text-size:small" class="fas fa-chevron-down"></i>
</button>
</div>
</div>
</div>
<!-- Secondary Navigation -->
<div
layout="flex items:center" space="m-t:small h:large w:[100%] p-x:small p-t:small" visual="border:neutral-200 text-size:small" class="border-t"
>
<div layout="grow">
<a
href="#"
layout="flex items:center" space="g:tiny" visual="font:tw-semibold text:blue-600 hover:underline"
>
<i class="fas fa-home"></i>
Project Dashboard
</a>
</div>
<div layout="flex items:center" space="g:medium">
<span visual="text:neutral-500">Last updated: 2 minutes ago</span>
<div space="h:medium w:thin" visual="bg:neutral-200"></div>
<a href="#" layout="flex items:center" space="g:tiny" visual="hover:text:blue-600">
<i class="fas fa-question-circle"></i>
Help
</a>
</div>
</div>
</div>
</nav>
</div>
```
## Tailwind CSS Code
```html
<div class="w-full lg:h-40">
<nav class="w-full p-6 z-50" x-data="{ isOpen: false }">
<!-- Announcement Bar -->
<div class="container mx-auto mb-4">
<div
class="flex items-center justify-between rounded-lg bg-blue-600 px-4 py-2 text-white"
>
<p class="text-sm">
🎉 New Feature Alert: Try our AI-powered analytics -
<a href="#" class="underline hover:text-blue-200">Learn More</a>
</p>
<div class="hidden lg:flex lg:items-center lg:gap-4">
<a href="#" class="text-sm hover:text-blue-200">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-sm hover:text-blue-200">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="text-sm hover:text-blue-200">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
<!-- Main Navigation -->
<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"
>
<a
href="#"
class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
>Dashboard</a
>
<a
href="#"
class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
>Analytics</a
>
<a
href="#"
class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
>Reports</a
>
<a
href="#"
class="-mx-2 flex h-12 items-center px-6 hover:text-blue-600 lg:mx-0"
>Team</a
>
<!-- User Menu -->
<div class="relative ml-4">
<button
class="flex items-center gap-2 rounded-lg px-4 py-2 hover:bg-neutral-100"
>
<img
src="https://placehold.co/32x32"
class="h-8 w-8 rounded-full"
alt="User"
/>
<span class="font-semibold">John Doe</span>
<i class="fas fa-chevron-down text-sm"></i>
</button>
</div>
</div>
</div>
<!-- Secondary Navigation -->
<div
class="mt-2 flex h-8 w-full items-center border-t border-neutral-200 px-2 pt-2 text-sm"
>
<div class="flex-grow">
<a
href="#"
class="flex items-center gap-1 font-semibold text-blue-600 hover:underline"
>
<i class="fas fa-home"></i>
Project Dashboard
</a>
</div>
<div class="flex items-center gap-4">
<span class="text-neutral-500">Last updated: 2 minutes ago</span>
<div class="h-4 w-px bg-neutral-200"></div>
<a href="#" class="flex items-center gap-1 hover:text-blue-600">
<i class="fas fa-question-circle"></i>
Help
</a>
</div>
</div>
</div>
</nav>
</div>
```