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
<section layout="container relative" space="m-x:auto m-b:big-3x">
<div space="p-x:medium-3x p-t:giant-4x tw-lg:p-x:big-3x tw-lg:p-t:big-3x">
<div layout="grid tw-lg:grid-cols:3" space="m-x:auto w:[100%] g:medium">
<div layout="tw-lg:col-span:3">
<div space="m-b:small" visual="text-size:small">Webinar</div>
<h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Master the Pillars of Product Design</h1>
<p space="tw-lg:m-b:medium" class="text"><i space="m-r:small" class="fas fa-calendar"></i>3 Days (Wednesday & Thursday)<i space="m-x:small" class="fas fa-clock"></i>10:00 AM - 5:00 PM</p>
</div>
<div layout="tw-lg:col-span:2">
<!--Start Hero Section-->
<section>
<iframe src="https://www.youtube.com/embed/__NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen space="w:[100%]" visual="rounded:medium" class="aspect-video"></iframe>
</section>
<!--End Hero Section-->
<div space="h:medium w:[100%]"></div>
<div layout="tw-lg:hidden" space="m-b:medium p:medium" visual="rounded:medium border-w:thin border:neutral-200">
<div layout="flex">
<div space="h:big w:big" visual="rounded:small bg:neutral-200"></div>
<div space="h:[100%] w:small-3x"></div>
<div>
<h1 visual="text-size:huge font:tw-bold" class="leading-7">Starting at RM 437</h1>
<p visual="text-size:small" class="leading-5"><i space="m-r:small" visual="text:neutral-400" class="fas fa-users"></i>394/400 spots filled</p>
</div>
</div>
<div space="h:medium w:[100%]"></div>
<div space="h:medium w:[100%]" visual="border:neutral-200" class="border-t"></div>
<div layout="flex">
<div>
<i class="fas fa-laptop"></i>
</div>
<div space="w:small-3x"></div>
<div layout="flex grow col">
<p visual="font:tw-semibold">Join via video call</p>
<p visual="text-size:small">A link will be emailed to you upon registration.</p>
</div>
</div>
<div space="h:medium w:[100%]"></div>
<div space="h:medium w:[100%]" visual="border:neutral-200" class="border-t"></div>
<div>
<h1 space="m-b:small" visual="text-size:big font:tw-semibold">Guest</h1>
<div layout="flex items:center" space="h:big p:small" visual="rounded:medium border-w:thin border:neutral-200">
<p layout="grow">Adult</p>
<div layout="flex">
<div layout="flex items:center justify:center" space="h:large w:large" visual="rounded:small bg:neutral-100">
<i class="fas fa-minus"></i>
</div>
<div layout="flex items:center justify:center" space="h:large w:big">
<p>1</p>
</div>
<div layout="flex items:center justify:center" space="h:large w:large" visual="rounded:small bg:neutral-100">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<div space="h:medium w:[100%]"></div>
<div space="h:medium w:[100%]" visual="border:neutral-200" class="border-t"></div>
<div>
<div layout="flex" space="w:[100%]">
<p layout="grow">RM 874.00 x 1 adult</p>
<p>RM 874</p>
</div>
<div space="h:small w:[100%]"></div>
<div layout="flex" space="w:[100%]">
<p layout="grow">20% early bird discount</p>
<p visual="text:green-400">- RM 200</p>
</div>
</div>
<div space="h:medium w:[100%]"></div>
<div space="h:medium w:[100%]" visual="border:neutral-200" class="border-t"></div>
<div layout="flex" space="w:[100%]" visual="text-size:big">
<p layout="grow">Total</p>
<p visual="font:tw-semibold">RM 674</p>
</div>
<div space="h:medium w:[100%]"></div>
<a href="" layout="flex items:center justify:center" space="h:big-2x w:[100%] p-x:medium-3x" visual="rounded:medium bg:neutral-800 text-size:large font:tw-semibold text:white hover:opacity:80"> Reserve Your Spot </a>
<div space="h:small w:[100%]"></div>
<a href="" layout="flex items:center justify:center" space="h:big-2x w:[100%] p-x:medium-3x" visual="rounded:medium text-size:large font:tw-semibold hover:bg:neutral-100"> Need Assistance? <i space="m-l:medium" class="fas fa-headset"></i> </a>
</div>
<!--Start Description Section-->
<section>
<h1 space="m-b:medium" visual="text-size:huge font:tw-bold">About the Course</h1>
<p visual="text-size:large">
Discover the essential skills every digital product designer needs to succeed. Guided by Kyle Turman, Sr. Director of Product Design at Slack, this webinar dives deep into the core pillars of digital product design. Learn how to design and deliver impactful digital products at scale, drawing from real-world insights and best practices.
<br /><br />
<strong>In Partnership with Slack Design</strong>
<br /><br />
Slack Design is a team of passionate, innovative designers dedicated to making work simpler, more enjoyable, and productive. Through collaboration and knowledge-sharing, they aim to empower the broader design community.
</p>
</section>
<!--End Description Section-->
<div space="h:large w:[100%]" visual="border:neutral-200" class="border-b"></div>
<div space="h:large w:[100%]"></div>
<!--Start Speaker Section-->
<section>
<h1 visual="text-size:huge font:tw-bold" class="leading-7">Meet Your Instructor</h1>
<div layout="grid grid-cols:1" space="m-t:medium g:medium">
<div layout="grid grid-cols:2 tw-md:grid-cols:3 tw-lg:grid-cols:4" space="g:medium">
<div
visual="rounded:medium bg:neutral-100"
style="
padding-top: 120%;
background: url('https://placehold.co/200x260');
background-size: cover;
"
></div>
<div layout="tw-md:hidden"></div>
<div layout="col-span:2 tw-lg:col-span:3">
<p visual="text-size:large font:tw-semibold">Kyle Turman</p>
<p space="m-y:tiny" visual="text-size:mini">Sr. Director of Product Design at Slack</p>
<p>With years of experience in designing scalable digital products, Kyle Turman brings a wealth of knowledge to this webinar. Learn how to navigate the challenges of app design, create user-centric solutions, and stand out in a competitive market.</p>
</div>
</div>
</div>
</section>
<!--End Speaker Section-->
<div space="h:large w:[100%]" visual="border:neutral-200" class="border-b"></div>
<div space="h:large w:[100%]"></div>
<!--Start Organizer Section-->
<section>
<h1 visual="text-size:huge font:tw-bold" class="leading-7">Organized By</h1>
<div layout="grid grid-cols:1" space="m-t:medium g:medium">
<div layout="grid grid-cols:2 tw-md:grid-cols:3 tw-lg:grid-cols:4" space="g:medium">
<div
visual="rounded:medium bg:neutral-100"
style="
padding-top: 120%;
background: url('https://placehold.co/200x260');
background-size: cover;
"
></div>
<div layout="tw-md:hidden"></div>
<div layout="col-span:2 tw-lg:col-span:3">
<p visual="text-size:large font:tw-semibold">FixColab Group Sdn Bhd</p>
<p space="m-y:tiny" visual="text-size:mini">Innovators in Design Education</p>
<p>FixColab is committed to empowering designers with the skills and knowledge needed to thrive in the digital age. Through workshops, webinars, and collaborative projects, they aim to foster creativity and innovation in the design community.</p>
</div>
</div>
</div>
</section>
<!--End Organizer Section-->
<section layout="hidden tw-lg:block">
<div space="h:large w:[100%]"></div>
<div layout="flex items:center" space="h:big-2x" visual="border:neutral-100" class="border-b border-t">
<div layout="overflow:hidden" space="h:large w:large" visual="rounded:round bg:neutral-100">
<img src="https://placehold.co/32x32" />
</div>
<div layout="flex grow col" space="p-x:small">
<h1 visual="text-size:small font:tw-bold">Hosted by FixColab Group Sdn Bhd</h1>
<p visual="text-size:mini">Published December 2, 2021</p>
</div>
<div>
<a href="" layout="flex items:center" space="h:large p-x:small-3x" visual="rounded:medium bg:neutral-100 text-size:small"
><i space="m-r:small" class="fas fa-share-alt"></i>
<p>Share</p>
</a>
</div>
</div>
</section>
</div>
<div layout="hidden tw-lg:block">
<div layout="sticky top:giant-4x" space="p:medium" visual="rounded:medium border-w:thin border:neutral-200">
<div layout="flex">
<div layout="flex items:center justify:center" space="h:big w:big" visual="rounded:small bg:neutral-200 text-size:big text:blue-600">
<i class="fas fa-graduation-cap"></i>
</div>
<div space="h:[100%] w:small-3x"></div>
<div>
<h1 visual="text-size:huge font:tw-bold" class="leading-7">Starting at RM 437</h1>
<p visual="text-size:small" class="leading-5"><i space="m-r:small" visual="text:neutral-400" class="fas fa-users"></i>394/400 spots filled</p>
</div>
</div>
<div space="h:medium w:[100%]"></div>
<div space="h:medium w:[100%]" visual="border:neutral-200" class="border-t"></div>
<div layout="flex">
<div>
<i class="fas fa-laptop"></i>
</div>
<div space="w:small-3x"></div>
<div layout="flex grow col">
<p visual="font:tw-semibold">Join via video call</p>
<p visual="text-size:small">A link will be emailed to you upon registration.</p>
</div>
</div>
<div space="h:medium w:[100%]"></div>
<div space="h:medium w:[100%]" visual="border:neutral-200" class="border-t"></div>
<div>
<h1 space="m-b:small" visual="text-size:big font:tw-semibold">Guest</h1>
<div layout="flex items:center" space="h:big p:small" visual="rounded:medium border-w:thin border:neutral-200">
<p layout="grow">Adult</p>
<div layout="flex">
<div layout="flex items:center justify:center" space="h:large w:large" visual="rounded:small bg:neutral-100">
<i class="fas fa-minus"></i>
</div>
<div layout="flex items:center justify:center" space="h:large w:big">
<p>1</p>
</div>
<div layout="flex items:center justify:center" space="h:large w:large" visual="rounded:small bg:neutral-100">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<div space="h:medium w:[100%]"></div>
<div space="h:medium w:[100%]" visual="border:neutral-200" class="border-t"></div>
<div>
<div layout="flex" space="w:[100%]">
<p layout="grow">RM 874.00 x 1 adult</p>
<p>RM 874</p>
</div>
<div space="h:small w:[100%]"></div>
<div layout="flex" space="w:[100%]">
<p layout="grow">20% early bird discount</p>
<p visual="text:red-500">- RM 200</p>
</div>
</div>
<div space="h:medium w:[100%]"></div>
<div space="h:medium w:[100%]" visual="border:neutral-200" class="border-t"></div>
<div layout="flex" space="w:[100%]" visual="text-size:big">
<p layout="grow">Total</p>
<p visual="font:tw-semibold">RM 674</p>
</div>
<div space="h:medium w:[100%]"></div>
<a href="" layout="flex items:center justify:center" space="h:big-2x w:[100%] p-x:medium-3x" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80"> Reserve Your Spot </a>
<div space="h:small w:[100%]"></div>
<a href="" layout="flex items:center justify:center" space="h:big-2x w:[100%] p-x:medium-3x" visual="rounded:medium text-size:large font:tw-semibold hover:bg:neutral-100"> Need Assistance? <i space="m-l:medium" class="fas fa-headset"></i> </a>
</div>
</div>
</div>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="container relative mx-auto mb-16">
<div class="px-6 pt-36 lg:px-16 lg:pt-16">
<div class="mx-auto grid w-full gap-4 lg:grid-cols-3">
<div class="lg:col-span-3">
<div class="mb-2 text-sm">Webinar</div>
<h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Master the Pillars of Product Design</h1>
<p class="text lg:mb-4"><i class="fas fa-calendar mr-2"></i>3 Days (Wednesday & Thursday)<i class="fas fa-clock mx-2"></i>10:00 AM - 5:00 PM</p>
</div>
<div class="lg:col-span-2">
<!--Start Hero Section-->
<section>
<iframe src="https://www.youtube.com/embed/__NeP0RqACU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="aspect-video w-full rounded-lg"></iframe>
</section>
<!--End Hero Section-->
<div class="h-4 w-full"></div>
<div class="mb-4 rounded-lg border border-neutral-200 p-4 lg:hidden">
<div class="flex">
<div class="h-12 w-12 rounded-md bg-neutral-200"></div>
<div class="h-full w-3"></div>
<div>
<h1 class="text-2xl font-bold leading-7">Starting at RM 437</h1>
<p class="text-sm leading-5"><i class="fas fa-users mr-2 text-neutral-400"></i>394/400 spots filled</p>
</div>
</div>
<div class="h-4 w-full"></div>
<div class="h-4 w-full border-t border-neutral-200"></div>
<div class="flex">
<div>
<i class="fas fa-laptop"></i>
</div>
<div class="w-3"></div>
<div class="flex flex-grow flex-col">
<p class="font-semibold">Join via video call</p>
<p class="text-sm">A link will be emailed to you upon registration.</p>
</div>
</div>
<div class="h-4 w-full"></div>
<div class="h-4 w-full border-t border-neutral-200"></div>
<div>
<h1 class="mb-2 text-xl font-semibold">Guest</h1>
<div class="flex h-12 items-center rounded-lg border border-neutral-200 p-2">
<p class="flex-grow">Adult</p>
<div class="flex">
<div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100">
<i class="fas fa-minus"></i>
</div>
<div class="flex h-8 w-12 items-center justify-center">
<p>1</p>
</div>
<div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<div class="h-4 w-full"></div>
<div class="h-4 w-full border-t border-neutral-200"></div>
<div>
<div class="flex w-full">
<p class="flex-grow">RM 874.00 x 1 adult</p>
<p>RM 874</p>
</div>
<div class="h-2 w-full"></div>
<div class="flex w-full">
<p class="flex-grow">20% early bird discount</p>
<p class="text-green-400">- RM 200</p>
</div>
</div>
<div class="h-4 w-full"></div>
<div class="h-4 w-full border-t border-neutral-200"></div>
<div class="flex w-full text-xl">
<p class="flex-grow">Total</p>
<p class="font-semibold">RM 674</p>
</div>
<div class="h-4 w-full"></div>
<a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-neutral-800 px-6 text-lg font-semibold text-white hover:opacity-80"> Reserve Your Spot </a>
<div class="h-2 w-full"></div>
<a href="" class="flex h-14 w-full items-center justify-center rounded-lg px-6 text-lg font-semibold hover:bg-neutral-100"> Need Assistance? <i class="fas fa-headset ml-4"></i> </a>
</div>
<!--Start Description Section-->
<section>
<h1 class="mb-4 text-2xl font-bold">About the Course</h1>
<p class="text-lg">
Discover the essential skills every digital product designer needs to succeed. Guided by Kyle Turman, Sr. Director of Product Design at Slack, this webinar dives deep into the core pillars of digital product design. Learn how to design and deliver impactful digital products at scale, drawing from real-world insights and best practices.
<br /><br />
<strong>In Partnership with Slack Design</strong>
<br /><br />
Slack Design is a team of passionate, innovative designers dedicated to making work simpler, more enjoyable, and productive. Through collaboration and knowledge-sharing, they aim to empower the broader design community.
</p>
</section>
<!--End Description Section-->
<div class="h-8 w-full border-b border-neutral-200"></div>
<div class="h-8 w-full"></div>
<!--Start Speaker Section-->
<section>
<h1 class="text-2xl font-bold leading-7">Meet Your Instructor</h1>
<div class="mt-4 grid grid-cols-1 gap-4">
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
<div
class="rounded-lg bg-neutral-100"
style="
padding-top: 120%;
background: url('https://placehold.co/200x260');
background-size: cover;
"
></div>
<div class="md:hidden"></div>
<div class="col-span-2 lg:col-span-3">
<p class="text-lg font-semibold">Kyle Turman</p>
<p class="my-1 text-xs">Sr. Director of Product Design at Slack</p>
<p>With years of experience in designing scalable digital products, Kyle Turman brings a wealth of knowledge to this webinar. Learn how to navigate the challenges of app design, create user-centric solutions, and stand out in a competitive market.</p>
</div>
</div>
</div>
</section>
<!--End Speaker Section-->
<div class="h-8 w-full border-b border-neutral-200"></div>
<div class="h-8 w-full"></div>
<!--Start Organizer Section-->
<section>
<h1 class="text-2xl font-bold leading-7">Organized By</h1>
<div class="mt-4 grid grid-cols-1 gap-4">
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
<div
class="rounded-lg bg-neutral-100"
style="
padding-top: 120%;
background: url('https://placehold.co/200x260');
background-size: cover;
"
></div>
<div class="md:hidden"></div>
<div class="col-span-2 lg:col-span-3">
<p class="text-lg font-semibold">FixColab Group Sdn Bhd</p>
<p class="my-1 text-xs">Innovators in Design Education</p>
<p>FixColab is committed to empowering designers with the skills and knowledge needed to thrive in the digital age. Through workshops, webinars, and collaborative projects, they aim to foster creativity and innovation in the design community.</p>
</div>
</div>
</div>
</section>
<!--End Organizer Section-->
<section class="hidden lg:block">
<div class="h-8 w-full"></div>
<div class="flex h-14 items-center border-b border-t border-neutral-100">
<div class="h-8 w-8 overflow-hidden rounded-full bg-neutral-100">
<img src="https://placehold.co/32x32" />
</div>
<div class="flex flex-grow flex-col px-2">
<h1 class="text-sm font-bold">Hosted by FixColab Group Sdn Bhd</h1>
<p class="text-xs">Published December 2, 2021</p>
</div>
<div>
<a href="" class="flex h-8 items-center rounded-lg bg-neutral-100 px-3 text-sm"
><i class="fas fa-share-alt mr-2"></i>
<p>Share</p>
</a>
</div>
</div>
</section>
</div>
<div class="hidden lg:block">
<div class="sticky top-36 rounded-lg border border-neutral-200 p-4">
<div class="flex">
<div class="flex h-12 w-12 items-center justify-center rounded-md bg-neutral-200 text-xl text-blue-600">
<i class="fas fa-graduation-cap"></i>
</div>
<div class="h-full w-3"></div>
<div>
<h1 class="text-2xl font-bold leading-7">Starting at RM 437</h1>
<p class="text-sm leading-5"><i class="fas fa-users mr-2 text-neutral-400"></i>394/400 spots filled</p>
</div>
</div>
<div class="h-4 w-full"></div>
<div class="h-4 w-full border-t border-neutral-200"></div>
<div class="flex">
<div>
<i class="fas fa-laptop"></i>
</div>
<div class="w-3"></div>
<div class="flex flex-grow flex-col">
<p class="font-semibold">Join via video call</p>
<p class="text-sm">A link will be emailed to you upon registration.</p>
</div>
</div>
<div class="h-4 w-full"></div>
<div class="h-4 w-full border-t border-neutral-200"></div>
<div>
<h1 class="mb-2 text-xl font-semibold">Guest</h1>
<div class="flex h-12 items-center rounded-lg border border-neutral-200 p-2">
<p class="flex-grow">Adult</p>
<div class="flex">
<div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100">
<i class="fas fa-minus"></i>
</div>
<div class="flex h-8 w-12 items-center justify-center">
<p>1</p>
</div>
<div class="flex h-8 w-8 items-center justify-center rounded-md bg-neutral-100">
<i class="fas fa-plus"></i>
</div>
</div>
</div>
</div>
<div class="h-4 w-full"></div>
<div class="h-4 w-full border-t border-neutral-200"></div>
<div>
<div class="flex w-full">
<p class="flex-grow">RM 874.00 x 1 adult</p>
<p>RM 874</p>
</div>
<div class="h-2 w-full"></div>
<div class="flex w-full">
<p class="flex-grow">20% early bird discount</p>
<p class="text-red-500">- RM 200</p>
</div>
</div>
<div class="h-4 w-full"></div>
<div class="h-4 w-full border-t border-neutral-200"></div>
<div class="flex w-full text-xl">
<p class="flex-grow">Total</p>
<p class="font-semibold">RM 674</p>
</div>
<div class="h-4 w-full"></div>
<a href="" class="flex h-14 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-lg font-semibold text-white hover:opacity-80"> Reserve Your Spot </a>
<div class="h-2 w-full"></div>
<a href="" class="flex h-14 w-full items-center justify-center rounded-lg px-6 text-lg font-semibold hover:bg-neutral-100"> Need Assistance? <i class="fas fa-headset ml-4"></i> </a>
</div>
</div>
</div>
</div>
</section>
```