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="relative overflow:hidden" space="m-y:large tw-lg:m-y:big-3x">
<!-- Background Video/Image -->
<div layout="absolute inset:none" space="w:[100%] h:[100%]">
<img src="https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background" alt="Background Video" layout="object:cover" space="w:[100%] h:[100%]">
<!-- Or for an actual video background -->
<!--
<video autoplay muted loop layout="object:cover" space="w:[100%] h:[100%]">
<source src="your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
-->
<div layout="absolute inset:none" visual="bg:black opacity:60"></div> <!-- Dark overlay -->
</div>
<!-- Content Overlay -->
<div layout="relative container flex col items:center" space="m-x:auto p-x:medium-3x tw-lg:p-x:big-3x p-y:giant tw-lg:p-y:vast-3x" visual="text:center text:white" class="z-10">
<div space="m-b:medium max-w:[max-content] p-x:medium p-y:small" visual="rounded:medium" class="bg-blue-600/90">
<p visual="text-size:small font:tw-bold uppercase" class="tracking-wider">EXCLUSIVE PREMIERE</p>
</div>
<h1 space="m-b:medium-3x" visual="text-size:giant tw-lg:text-size:giga font:tw-bold">
Discover Our Latest Innovation
</h1>
<p space="m-b:large-3x max-w:[3xl] m-x:auto" visual="text-size:big tw-lg:text-size:grand opacity:90">
Watch our new video to see how we're changing the game and pioneering the future.
</p>
<a href="#" layout="flex items:center justify:center" space="p-x:large-3x h:big-3x p-y:medium w:[100%] tw-sm:w:auto max-w:[xs] m-x:auto" visual="bg:white hover:bg:blue-50 text:blue-600 text-size:big rounded:medium font:tw-semibold transition:colors duration:slow shadow:big hover:shadow:giant" class="group">
<i space="m-r:small-3x" visual="transition:transform duration:slow" class="fas fa-play group-hover:scale-110"></i> Watch Now
</a>
</div>
</section>
```
## Tailwind CSS Code
```html
<section class="relative my-8 lg:my-16 overflow-hidden">
<!-- Background Video/Image -->
<div class="absolute inset-0 w-full h-full">
<img src="https://placehold.co/1920x1080/2563EB/FFFFFF?text=Video+Background" alt="Background Video" class="w-full h-full object-cover">
<!-- Or for an actual video background -->
<!--
<video autoplay muted loop class="w-full h-full object-cover">
<source src="your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
-->
<div class="absolute inset-0 bg-black opacity-60"></div> <!-- Dark overlay -->
</div>
<!-- Content Overlay -->
<div class="relative container mx-auto px-6 lg:px-16 py-24 lg:py-48 text-center text-white z-10 flex flex-col items-center">
<div class="mb-4 max-w-max rounded-lg bg-blue-600/90 px-4 py-2">
<p class="text-sm font-bold uppercase tracking-wider">EXCLUSIVE PREMIERE</p>
</div>
<h1 class="text-4xl lg:text-7xl font-bold mb-6">
Discover Our Latest Innovation
</h1>
<p class="text-xl lg:text-3xl mb-10 max-w-3xl mx-auto opacity-90">
Watch our new video to see how we're changing the game and pioneering the future.
</p>
<a href="#" class="group bg-white hover:bg-blue-50 text-blue-600 text-xl rounded-lg px-10 h-16 py-4 flex items-center justify-center w-full sm:w-auto max-w-xs mx-auto font-semibold transition-colors duration-300 shadow-lg hover:shadow-xl">
<i class="fas fa-play mr-3 transition-transform duration-300 group-hover:scale-110"></i> Watch Now
</a>
</div>
</section>
```