Home
Curtis Bickler
Call to Action section

Call to Action section

CTA with clear message and big button

This tailwind example is contributed by Curtis Bickler, on 03-Oct-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 Curtis Bickler

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-base font-semibold text-yellow-400 dark:text-pink-300 tracking-wide uppercase">Unlock Your Potential
            Today</h2>
          <p
            class="mt-1 text-4xl font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl sm:tracking-tight lg:text-6xl">
            Discover
            <span class="px-2 py-1 relative inline-block"><svg class="stroke-current bottom-0 absolute text-yellow-300 -translate-x-2" viewBox="0 0 410 18" xmlns="http://www.w3.org/2000/svg"><path d="M6 6.4c16.8 16.8 380.8-11.2 397.6 5.602" stroke-width="12" fill="none" fill-rule="evenodd" stroke-linecap="round"></path></svg><span class="relative">Your True Potential</span></span>
          </p>
          <p class="max-w-3xl mt-5 mx-auto text-xl text-gray-500 dark:text-gray-300">Take the leap and unleash your
            capabilities. Experience
            one week of unlimited access on us and witness the transformation.</p>
          <a href="#"
            class="inline-block px-6 py-3 mt-8 bg-black dark:bg-yellow-500 text-white font-semibold rounded hover:bg-blue-700 dark:hover:bg-blue-600">
            Get Involved
          </a>
          <a href="#"
            class="inline-block px-6 py-3 mt-8 bg-yellow-500 dark:bg-yellow-500 text-white font-semibold rounded hover:bg-blue-700 dark:hover:bg-blue-600">
            Donate Today
          </a>
        </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

Drinkware landing page

Author:
Maxim

11 months ago

1.5k
carde Iptplus
Iptplus carde

Author:
Omer fils ELENGA

3 months ago

258
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Author:
Muhammad Umair Arshad

7 months ago

674
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
Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

1 year ago

2k
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.

Author:
Lekhraj Ghimire

8 months ago

839
Call to action section

Author:
Odessa Young

2 years ago

12.9k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

20.3k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

7 months ago

586
Component-[callToAction]

Author:
Matti

1 year ago

1.1k
Boimator welcoming back
Boimator welcoming back

Author:
Bonimater

7 months ago

522
Call to action
Call to action section. find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components