Home
Sophia Baker
Minimalistic hero section

Minimalistic hero section

This tailwind example is contributed by Sophia Baker, on 19-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action Hero

Author Sophia Baker

10.3k

Fork Fullscreen

<div class="max-w-6xl px-4 mx-auto md:max-w-4xl sm:max-w-2xl sm:px-6">
    <div class="text-center">
        <h1
            class="max-w-md mx-auto text-3xl font-extrabold tracking-normal text-gray-900 sm:text-3xl md:text-5xl lg:text-6xl md:leading-none sm:max-w-xl md:max-w-2xl lg:max-w-4xl">
            <span class="block">The simplest way to preview your Ad campaigns.</span></h1>
        <h2
            class="max-w-md px-12 mx-auto mt-3 font-normal text-gray-500 text-md sm:mt-5 sm:text-md md:mt-5 md:text-xl sm:max-w-xl md:max-w-xl">
            Sendpreview is a social media advertising tool that lets you quickly create Ad mockups for client approval.
        </h2>
        <div class="max-w-md mx-auto mt-5 sm:flex sm:justify-center md:mt-8">
            <div class="rounded-full shadow">
                <button type="button" class="flex items-center justify-center w-full px-8 py-3 text-base font-normal text-white bg-teal-400 border border-transparent rounded-full text-md hover:bg-teal-300 md:py-4 md:text-2xl md:px-10">Start for free</button>
            </div>
        </div>
    </div>
</div>

Related Examples