Home
Samuel Dawson
Hero section with button

Hero section with button

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

Call to Action Hero

Author Samuel Dawson

11.8k

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