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 v3.4. It is responsive. It supports dark mode. similar terms for this example are CTA,banner

Call to Action

Author Pixel Perfect

Tailwind v3.4 2.5k 9

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

CTA with image

Fagundo67

3 years ago

10.5k
Call to action

Sophia Baker

3 years ago

11.5k
Blog post card
Responsive blog post or article card. This card can also be used as a CTA

Anonymous

3 years ago

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

Noah Schmidt

3 years ago

16.9k
Call to Action
CTA with Dark and Shadow colors

KULDEEP

1 year ago

1.7k
Call to action block

Sienna

3 years ago

12.4k
asimple game lay out
asimple game lay out

Bonimater

1 year ago

1.3k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Banshee

1 year ago

1.4k
Hero section with button

Samuel Dawson

3 years ago

13.4k
Sign In Form
Clean and modern Sign In form with email, password, and "Forgot password" link. Fully responsive and styled with Tailwind CSS, perfect for SaaS platforms.

Lekhraj Ghimire

1 year ago

1.1k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Abhiraj

1 year ago

2.9k
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

KULDEEP

1 year ago

1.3k