Hero section with button

This tailwind example is contributed by Samuel Dawson, on 27-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action Hero

Author Samuel Dawson

Tailwind v3.4 13.4k 14

Fork Fullscreen

<div class="max-w-2xl mx-auto text-center">
    <h1 class="text-4xl font-bold tracking-tight text-black sm:text-5xl xl:text-5xl sm:tracking-tight">
        Create and share your own examples
    </h1>
    <p class="mt-6 text-lg leading-7 text-black/70 lg:leading-8 lg:text-xl">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
    </p>
    <div class="mt-8">
        <a href="#" target="_blank" class="block">
            <button
                class="flex content-center transition items-center justify-center text-center px-8 py-4 text-xl font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-200 mx-auto px-8"
                style="flex-shrink:0">
                <div class="flex items-center justify-start space-x-1.5">
                    <div class="w-5 h-5 flex items-center justify-center bg-white rounded-full">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24" fill="none" class="w-3 h-3"> <g clip-path="url(#clip0_506:6462)"> <path d="M4.00066 24.0001C6.20822 24.0001 7.99986 22.2081 7.99986 20V16H4.00066C1.79311 16 0.00146484 17.792 0.00146484 20C0.00146484 22.2081 1.79311 24.0001 4.00066 24.0001Z" fill="#0ACF83"></path> <path d="M0.00146484 12C0.00146484 9.79199 1.79311 8 4.00066 8H7.99986V16H4.00066C1.79311 16 0.00146484 14.208 0.00146484 12Z" fill="#A259FF"></path> <path d="M0.00183105 4C0.00183105 1.792 1.79347 0 4.00103 0H8.00023V8H4.00103C1.79347 8 0.00183105 6.208 0.00183105 4Z" fill="#F24E1E"></path> <path d="M8.00012 0H11.9993C14.2069 0 15.9986 1.792 15.9986 4C15.9986 6.208 14.2069 8 11.9993 8H8.00012V0Z" fill="#FF7262"></path> <path d="M15.9986 12C15.9986 14.208 14.2069 16 11.9993 16C9.79177 16 8.00012 14.208 8.00012 12C8.00012 9.79199 9.79177 8 11.9993 8C14.2069 8 15.9986 9.79199 15.9986 12Z" fill="#1ABCFE"></path> </g> <defs> <clipPath id="clip0_506:6462"> <rect width="16" height="24" fill="white"></rect> </clipPath> </defs> </svg> </div>
                    <span>Get the plugin</span>
                </div>
            </button>
        </a>
    </div>
    <p class="mt-8 text-sm font-normal text-gray-600">
        100% Free • No credit card required
    </p>
</div>

Related Examples

Product Page
Showcase for the product.

Prem..

4 years ago

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

Anonymous

3 years ago

21.1k
Hero section with call to action buttons

Prashant

4 years ago

15.9k
Hero section with sample code
Show sample code of your digital product

Dipti narayan

3 years ago

10.5k
Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

14.9k
Hero section

Mohit Prajapati

4 years ago

12.9k
Hero section with image

Sophia Baker

3 years ago

13.9k
Minimalistic hero section

Sophia Baker

3 years ago

12k
Very simple hero

Laurits

3 years ago

9.7k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Junclarkaizen Pagu

2 years ago

10.1k
Product Page
Showcase for the product.

muhamadrofii911

2 years ago

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

Coastal UI

1 year ago

2.7k