Home
Oliver Hansen
Call to example

Call to example

Call to example using radial-gradient

This tailwind example is contributed by Oliver Hansen, on 20-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action

Author Oliver Hansen

8.8k

Fork Fullscreen

<h2 class="mx-auto max-w-2xl text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
            Join our community today!
        </h2>

<h3 class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-500">
            Sign up for exclusive access to events, resources, and more
        </h3>

<div class="mt-8 flex items-center justify-center gap-x-6">
            <a class="inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white shadow-sm transition-all duration-150 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                href="#">
                Explore the forum
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                        clip-rule="evenodd"></path>
                </svg>
            </a>
        </div>

<svg viewBox="0 0 1024 1024"
            class="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
            aria-hidden="true">
            <circle cx="512" cy="512" r="512" fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fill-opacity="0.7">
            </circle>
            <defs>
                <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
                    <stop stop-color="#3b82f6"></stop>
                    <stop offset="1" stop-color="#1d4ed8"></stop>
                </radialGradient>
            </defs>
        </svg>

</div>
    
</div>

Related Examples

Call to action section

Author:
Odessa Young

2 years ago

12.9k
Product hunt showcase section

Author:
Leon Bachmann

3 years ago

10.5k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.6k
Join Our Community Banner
Encourage users to become members of a community.

Author:
Diego Chavez

2 years ago

8.6k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

11.3k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

886
Call to Action (CTA with Background Image)
A Call to Action (CTA) is an essential element in marketing and web design that prompts users to take a specific desired action. When combined with a compelling background image, it can significantly enhance user engagement and conversion rates.

Author:
Eliyanto Sarage

1 year ago

2.8k
Responsive CTA

Author:
Lukas Müller

3 years ago

10.1k
Call to action card with image
Responsive card with image

Author:
Noah Schmidt

2 years ago

16.4k
asimple game lay out
asimple game lay out

Author:
Bonimater

5 months ago

824
Modern CTA section
CTA banner

Author:
Pixel Perfect

1 year ago

1.9k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

11 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components