Sign-up form with CTA - Blocks Library

<?php
/**
 * Title: Sign-up form with CTA
 * Slug: sign-up-form-with-cta
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Sign-up form with CTA","categories":["featured"],"patternName":"wlc/sign-up-form-with-cta"},"align":"full","className":"sign-up-form-with-cta","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull sign-up-form-with-cta"><!-- wp:columns {"align":"full","className":"sign-up-form-with-cta__columns"} -->
<div class="wp-block-columns alignfull sign-up-form-with-cta__columns"><!-- wp:column {"className":"sign-up-form-with-cta__column-content"} -->
<div class="wp-block-column sign-up-form-with-cta__column-content"><!-- wp:heading {"level":1,"className":"sign-up-form-with-cta__heading"} -->
<h1 class="wp-block-heading sign-up-form-with-cta__heading">Discover new product and best possibilities</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"sign-up-form-with-cta__description"} -->
<p class="sign-up-form-with-cta__description">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"sign-up-form-with-cta__buttons"} -->
<div class="wp-block-buttons sign-up-form-with-cta__buttons"><!-- wp:button {"className":"sign-up-form-with-cta__button"} -->
<div class="wp-block-button sign-up-form-with-cta__button"><a class="wp-block-button__link wp-element-button"><svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path></svg>Watch video</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:group {"metadata":{"name":""},"className":"sign-up-form-with-cta__stats","layout":{"type":"constrained"}} -->
<div class="wp-block-group sign-up-form-with-cta__stats"><!-- wp:group {"align":"full","className":"sign-up-form-with-cta__stats-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull sign-up-form-with-cta__stats-box"><!-- wp:paragraph {"align":"left","className":"sign-up-form-with-cta__stats-value"} -->
<p class="has-text-align-left sign-up-form-with-cta__stats-value">42K</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"sign-up-form-with-cta__stats-description","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group sign-up-form-with-cta__stats-description"><!-- wp:paragraph -->
<p>Our Active</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Users</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","className":"sign-up-form-with-cta__stats-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull sign-up-form-with-cta__stats-box"><!-- wp:paragraph {"className":"sign-up-form-with-cta__stats-value"} -->
<p class="sign-up-form-with-cta__stats-value">3k</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"sign-up-form-with-cta__stats-description","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group sign-up-form-with-cta__stats-description"><!-- wp:paragraph -->
<p>Professional</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Creators</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","className":"sign-up-form-with-cta__stats-box","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group alignfull sign-up-form-with-cta__stats-box"><!-- wp:paragraph {"className":"sign-up-form-with-cta__stats-value"} -->
<p class="sign-up-form-with-cta__stats-value">560k</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"sign-up-form-with-cta__stats-description","layout":{"type":"constrained"}} -->
<div class="wp-block-group sign-up-form-with-cta__stats-description"><!-- wp:paragraph -->
<p>Weekly</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Downloads</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"sign-up-form-with-cta__column-form"} -->
<div class="wp-block-column sign-up-form-with-cta__column-form"><!-- wp:paragraph -->
<p>Miejsce na formularz</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></section>
<!-- /wp:group -->

.sign-up-form-with-cta {
    @apply bg-gray-50 dark:bg-gray-900;

    .sign-up-form-with-cta__columns {
        @apply grid py-8 px-4 mx-auto max-w-screen-xl gap-0 lg:gap-12 xl:gap-0 lg:py-16 lg:grid-cols-12 mb-0;
        
        .sign-up-form-with-cta__column-content {
            @apply place-self-center mr-auto mb-10 lg:col-span-7 xl:col-span-8 xl:mb-0;

            .sign-up-form-with-cta__heading {
                @apply mb-4 max-w-2xl text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white;
            }

            .sign-up-form-with-cta__description {
                @apply mb-6 max-w-2xl font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400;
            }

            .sign-up-form-with-cta__buttons {
              
                .sign-up-form-with-cta__button a{
                    @apply inline-flex items-center py-3 px-5 font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;
                }

                .sign-up-form-with-cta__button svg {
                    @apply mr-2 -ml-1 w-5 h-5;
                }
            }

            .sign-up-form-with-cta__stats {
                @apply hidden justify-between pt-12 mx-auto mt-14 border-t border-gray-300 xl:flex dark:border-gray-700 dark:text-white;

                .sign-up-form-with-cta__stats-box {
                    @apply flex mx-0;

                    .sign-up-form-with-cta__stats-value {
                        @apply text-4xl font-extrabold lg:text-5xl;
                    }

                    .sign-up-form-with-cta__stats-description {
                        @apply block pl-4 text-xl text-gray-500 dark:text-gray-400;
                        p {
                            @apply mb-0;
                        }
                    }
                }
            }
        }
    }

    .sign-up-form-with-cta__column-form {
        @apply justify-center p-4 max-w-screen-sm bg-white rounded-lg border border-gray-200 shadow lg:mt-0 lg:col-span-5 xl:col-span-4 sm:p-6 lg:p-8 dark:bg-gray-800 dark:border-gray-700;
    }
}