CTA section with animated element
Category: CTA
I'm sharing you a component below for reference the HTML structure with the exact COMPUTED CSS styles inlined into the style tags. Use this to understand exactly how it looks (dimensions, colors, flexbox behavior):
<section style="display: block; position: static; width: 1400px; height: 642px; max-width: 1400px; margin: 64px 60.4px; padding: 0px 48px; border: 0px solid rgb(221, 255, 220); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(221, 255, 220); font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 500; line-height: 24px; text-align: start; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;"><div style="cursor: crosshair; display: grid; position: static; width: 1304px; height: 642px; border: 0px solid rgb(221, 255, 220); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(221, 255, 220); font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 500; line-height: 24px; text-align: start; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; gap: 40px 20px; grid-template-columns: 642px 642px; grid-template-rows: 642px; opacity: 1; overflow: visible;"><video loop="" muted="" playsinline="" disablepictureinpicture="" poster="https://modal-cdn.com/marketing-website-assets/modal_footer_poster.jpg" style="object-fit: contain; cursor: crosshair; display: block; position: static; width: 642px; height: 642px; max-width: 100%; border: 0px solid rgb(221, 255, 220); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(221, 255, 220); font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 500; line-height: 24px; text-align: start; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: clip;"><!--[--><source src="https://modal-cdn.com/marketing-website-assets/modal_footer_no_alpha_h264.mp4" type="video/mp4" style="display: inline; position: static; width: auto; height: auto; border: 0px solid rgb(0, 0, 0); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(0, 0, 0); font-family: "Times New Roman"; font-size: 16px; font-weight: 400; text-align: start; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;"><!--]--></video><!----> <div style="cursor: crosshair; display: flex; position: static; width: 642px; height: 642px; border: 0px solid rgb(221, 255, 220); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(221, 255, 220); font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 500; line-height: 24px; text-align: start; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: column; justify-content: center; align-items: flex-start; opacity: 1; overflow: visible;"><h2 style="cursor: crosshair; display: block; position: static; width: 512px; height: 118.8px; max-width: 512px; margin: 0px 0px 56px; border: 0px solid rgb(221, 255, 220); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: rgb(221, 255, 220); font-family: Goga, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 54px; font-weight: 400; line-height: 59.4px; text-align: left; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible;">Ship your first app in minutes. <!--[!--><!--]--></h2> <!--[--><a href="/signup" rel="" tabindex="0" style="display: flex; position: static; width: 114.713px; height: 38px; padding: 9px 21px; border: 0px solid rgb(0, 0, 0); border-radius: 2.68435e+07px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(127, 238, 100); color: rgb(0, 0, 0); font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 14px; font-weight: 500; line-height: 20px; text-align: start; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; justify-content: center; align-items: center; opacity: 1; overflow: visible; cursor: pointer;"><!---->Get Started<!----> <!--[!--><!--]--></a><!--]--><!----> <!--[--><p style="display: block; position: static; width: 166.637px; height: 20px; margin: 24px 0px 0px; border: 0px solid oklab(0.966498 -0.0472349 0.0339288 / 0.6); background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); color: oklab(0.966498 -0.0472349 0.0339288 / 0.6); font-family: "Inter Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 14px; font-weight: 500; line-height: 20px; text-align: start; letter-spacing: -0.36px; flex: 0 1 auto; flex-flow: row; opacity: 1; overflow: visible; cursor: crosshair;">$30 / month free compute</p><!--]--></div></div></section>
create a canvas to display a cta component. we want the cta component to be centered and the space around it to be flexible empty.
reproduce this cta component
Created by: LandingHero
