Home
Pixel Perfect
CTA section with light beam from bottom effect

CTA section with light beam from bottom effect

Forked from> @pixel-perfect/modern-cta-section-2

It also has support for dark mode

This tailwind example is contributed by Pixel Perfect, on 18-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Pixel Perfect

2.1k

Fork Fullscreen

<div class="relative overflow-hidden border-b w-full dark:border-gray-700 dark:bg-gray-900">
    <div class="px-6 py-8 sm:px-6 sm:py-20">
        <div class="max-w-2xl mx-auto text-center">
            <h2 class="text-2xl font-semibold tracking-tight text-center text-black sm:text-4xl dark:text-white">
                Didn't find the tool you were looking for?
            </h2>
            <p
                class="max-w-xl mx-auto mt-3 text-gray-700 sm:mt-6 text-md sm:text-lg sm:leading-snug dark:text-gray-300">
                We're constantly working to improve and expand our toolset to meet your needs. If you have a
                specific tool in mind that you couldn't find, please let us know.
            </p>
            <div class="flex items-center justify-center mt-6 sm:mt-10 gap-x-6">
                <a class="flex flex-row items-center justify-center min-w-[130px] rounded-full border disabled:cursor-not-allowed disabled:opacity-50 transition ease-in-out duration-150 text-base bg-black text-white font-medium tracking-wide border-transparent py-1.5 h-[38px] hover:text-gray-200 dark:bg-white dark:text-black dark:hover:text-gray-700 px-8"
                    href="">
                    Request Tool
                </a>
            </div>
        </div>
    </div>
    <svg viewBox="0 0 1024 1024"
        class="absolute left-1/2 z-10 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>

Related Examples

Travel Landing Page: Australia

Author:
Maxim

11 months ago

2.3k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Author:
Homayoun

5 months ago

749
CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

Author:
KULDEEP

9 months ago

850
Simple call to action

Author:
Laurits

3 years ago

10.1k
Call to action

Author:
Sophia Baker

3 years ago

10.9k
Call to Action

Author:
Abdul Baset Bappy

8 months ago

865
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

1 year ago

2k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

9 months ago

1.3k
Call to Action
CTA with Dark and Shadow colors

Author:
KULDEEP

8 months ago

1.2k
Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

1 year ago

2k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

11.3k
CTA block

Author:
Samuel Dawson

3 years ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components