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

1.9k

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

Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

1 year ago

1.9k
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

1 month ago

48
Simple call to action

Author:
Laurits

2 years ago

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

Author:
Anonymous

2 years ago

10.2k
Call to Action (CTA) Section

Author:
ariaw

7 months ago

571
Survey CTA

Author:
JaxStone

2 years ago

13.9k
Call to Action

Author:
Abdul Baset Bappy

5 months ago

576
Call ya
Simple Call-to-Action

Author:
Matti

10 months ago

1.3k
Beautiful CTA w/ large buttons
This CTA card also has a features list

Author:
Carla Hoffman

1 year ago

2.3k
Travel Landing Page: Australia

Author:
Maxim

8 months ago

1.8k
CTA banner
With fading bg gradient

Author:
Lautaro Gómez

1 year ago

1.2k
Animated Text Rotator | Smooth Tailwindcss Text Transition Effects
Beautiful animated text rotation component with smooth fade transitions. Perfect for hero sections, showcasing features, and engaging website visitors with dynamic content.

Author:
Homayoun

1 week ago

108

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components