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 items:center" space="m-b:small h:large w:[100%]" visual="text-size:small font:tw-semibold">
<div layout="flex grow">
<a href="" layout="flex items:center" space="h:large p-x:small-3x">
<i space="p:none tw-lg:p-r:small" class="fas fa-phone"></i>
<p layout="hidden tw-lg:block">+60123456789</p>
</a>
<a href="" layout="flex items:center" space="h:large p-x:small-3x">
<i space="p:none tw-lg:p-r:small" class="fas fa-map-marker-alt"></i>
<p layout="hidden tw-lg:block">Location, Country</p>
</a>
</div>
<div layout="flex">
<a href="" layout="flex items:center justify:center" space="h:large w:large">
<i class="fab fa-facebook"></i>
</a>
<a href="" layout="flex items:center justify:center" space="h:large w:large">
<i class="fab fa-twitter"></i>
</a>
<a href="" layout="flex items:center justify:center" space="h:large w:large">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<div space="w:[100%] p-b:small" class="border-t"></div>
<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">
<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">About</a>
<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">Operating Hour</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">Booking an Appoinment</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="mb-2 flex h-8 w-full items-center text-sm font-semibold">
<div class="flex flex-grow">
<a href="" class="flex h-8 items-center px-3">
<i class="fas fa-phone p-0 lg:pr-2"></i>
<p class="hidden lg:block">+60123456789</p>
</a>
<a href="" class="flex h-8 items-center px-3">
<i class="fas fa-map-marker-alt p-0 lg:pr-2"></i>
<p class="hidden lg:block">Location, Country</p>
</a>
</div>
<div class="flex">
<a href="" class="flex h-8 w-8 items-center justify-center">
<i class="fab fa-facebook"></i>
</a>
<a href="" class="flex h-8 w-8 items-center justify-center">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="flex h-8 w-8 items-center justify-center">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<div class="w-full border-t pb-2"></div>
<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 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">About</a>
<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">Operating Hour</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">Booking an Appoinment</a>
</div>
</div>
</div>
</nav>
</div>
```