# Product CTA Interactive Category: cta Description: Features an engaging call-to-action for a product, often with interactive hover effects on visuals. ## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

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" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x"> <div layout="relative relative grid grid-cols:1 overflow:hidden tw-lg:grid-cols:3" space="g:medium" visual="rounded:medium border-w:thin bg:black text:white shadow:big" class="group"> <div layout="absolute left:none top:none overflow:hidden" space="h:[100%] w:[100%]"> <img src="https://placehold.co/800x400" loading="lazy" layout="object:cover" space="h:[100%] w:[100%]" visual="opacity:70" class="blur-2xl" /> </div> <div layout="col-span:1 flex col justify:center tw-lg:col-span:2" space="p:large tw-lg:p-x:big-3x tw-lg:p-y:big" class="z-10"> <h1 space="m-b:small" visual="text-size:huge font:tw-semibold capitalize tw-lg:text-size:mega tw-lg:font:tw-bold">Start Building with <span visual="text:blue-600">SenangWebs</span></h1> <p space="m-b:medium w:[100%] tw-lg:m-b:large" visual="text-size:base tw-lg:text-size:huge">Drag &amp; drop website builder for effortless online presence. Came with SenangStart templates, sections &amp; components library built-in.</p> <div id="in87r6" layout="flex col tw-lg:row" space="g:medium"><a id="ibapy4" href="https://use.senangwebs.com" type="button" target="_blank" layout="flex items:center justify:center" space="h:big w:[100%] p-x:medium-3x tw-lg:max-w:[max-content]" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:opacity:80"> Start Now! </a></div> </div> <div layout="flex items:end justify:center" class="z-10"> <img id="ivfr4c" src="https://placehold.co/300x400" space="w:[100%]" visual="duration:slow" class="scale-120 group-hover:-ml-16" /> </div> </div> </section> ``` ## Tailwind CSS Code ```html <section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16"> <div class="group relative relative grid grid-cols-1 gap-4 overflow-hidden rounded-lg border bg-black text-white shadow-lg lg:grid-cols-3"> <div class="absolute left-0 top-0 h-full w-full overflow-hidden"> <img src="https://placehold.co/800x400" loading="lazy" class="h-full w-full object-cover opacity-70 blur-2xl" /> </div> <div class="z-10 col-span-1 flex flex-col justify-center p-8 lg:col-span-2 lg:px-16 lg:py-12"> <h1 class="mb-2 text-2xl font-semibold capitalize lg:text-6xl lg:font-bold">Start Building with <span class="text-blue-600">SenangWebs</span></h1> <p class="mb-4 w-full text-base lg:mb-8 lg:text-2xl">Drag &amp; drop website builder for effortless online presence. Came with SenangStart templates, sections &amp; components library built-in.</p> <div id="in87r6" class="flex flex-col gap-4 lg:flex-row"><a id="ibapy4" href="https://use.senangwebs.com" type="button" target="_blank" class="flex h-12 w-full items-center justify-center rounded-lg bg-blue-600 px-6 text-lg font-semibold text-white hover:opacity-80 lg:max-w-max"> Start Now! </a></div> </div> <div class="z-10 flex items-end justify-center"> <img id="ivfr4c" src="https://placehold.co/300x400" class="scale-120 w-full duration-300 group-hover:-ml-16" /> </div> </div> </section> ```