Home
Sienna
Call to action block

Call to action block

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

Call to Action Jumbotron

Author Sienna

11.7k

Fork Fullscreen

<section class="bg-gray-900 w-full">
    <div class="relative lg:flex items-center space-y-16 max-w-7xl mx-auto px-8 py-24 lg:space-y-0 lg:space-x-16">
        <div class="flex-grow space-y-8">
            <div class="space-y-4">
                <h2 class="text-white font-bold text-yellow-200 text-4xl">
                    Submit your own articles 🚀
                </h2>

<p class="text-xl text-white">
                    Visit the article dashboard to publish your own articles to our website!
                </p>
            </div>

<a href="#" target="_blank"
                class="group inline-flex items-center justify-center px-6 text-lg sm:text-xl font-semibold tracking-tight text-white transition rounded-lg h-11 ring-2 ring-inset ring-white hover:bg-yellow-200 hover:text-yellow-800 hover:ring-yellow-200 focus:ring-yellow-200 focus:text-yellow-800 focus:bg-yellow-200 focus:outline-none">
                Go to article dashboard
            </a>
        </div>
    </div>
</section>

Related Examples

Call to action section with image

Author:
Steven Kuhn

2 years ago

10k
Jumbotron card

Author:
Sienna

2 years ago

11.6k
Call to action

Author:
Leon Bachmann

2 years ago

8.5k
Call to action

Author:
Piet Vriend

2 years ago

11.1k
Very simple hero

Author:
Laurits

2 years ago

8.8k
Simple call to action

Author:
Laurits

2 years ago

9.7k
Product hunt showcase section

Author:
Leon Bachmann

3 years ago

10.1k
CTA with image

Author:
Fagundo67

2 years ago

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

Author:
KULDEEP

5 months ago

833
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

5 months ago

575
GamingOnline
used to pray game online

Author:
INGRIDE MUZIRANENGE

4 weeks ago

382
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

787

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components