Subscribe to our newsletter section

This tailwind example is contributed by Conan Hilton, on 11-Jul-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Footer Call to Action eCommerce

Author Conan Hilton

Tailwind v3.4 12k 18

Fork Fullscreen

<div class="relative bg-violet-600">
    <div class="absolute inset-x-0 bottom-0">
        <svg viewBox="0 0 224 12" fill="currentColor" class="w-full -mb-1 text-white" preserveAspectRatio="none">
            <path
                d="M0,0 C48.8902582,6.27314026 86.2235915,9.40971039 112,9.40971039 C137.776408,9.40971039 175.109742,6.27314026 224,0 L224,12.0441132 L0,12.0441132 L0,0 Z">
            </path>
        </svg>
    </div>
    <div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
        <div class="relative max-w-2xl sm:mx-auto sm:max-w-xl md:max-w-2xl sm:text-center">
            <h2 class="mb-6 font-sans text-3xl text-center font-bold tracking-tight text-white sm:text-4xl sm:leading-none">
              Subscribe to our newsletter
            </h2>
            <p class="mb-6 text-base text-indigo-200 md:text-lg">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae. explicabo. Sed ut perspiciatis unde omnis.
            </p>
            <form class="flex flex-col items-center w-full mb-4 md:flex-row md:px-16">
                <input
          placeholder="Email"
          required=""
          type="text"
          class="flex-grow w-full h-12 px-4 mb-3 text-white transition duration-200 border-2 border-transparent rounded appearance-none md:mr-2 md:mb-0 bg-deep-purple-900 focus:border-teal-accent-700 focus:outline-none focus:shadow-outline"
        />
                <a href="/"
                    class="inline-flex items-center justify-center w-full h-12 px-6 font-semibold tracking-wide text-gray-200 transition duration-200 rounded shadow-md md:w-auto hover:text-deep-purple-900 bg-teal-accent-400 hover:bg-teal-accent-700 focus:shadow-outline focus:outline-none">
                    Subscribe
                </a>
            </form>
            <p class="max-w-md mb-10 text-xs tracking-wide text-indigo-100 sm:text-sm sm:mx-auto md:mb-16">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.
            </p>
            <a href="/" aria-label="Scroll down"
                class="flex items-center justify-center w-10 h-10 mx-auto text-white duration-300 transform border border-gray-400 rounded-full hover:text-teal-accent-400 hover:border-teal-accent-400 hover:shadow hover:scale-110">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
                    <path
                        d="M10.293,3.293,6,7.586,1.707,3.293A1,1,0,0,0,.293,4.707l5,5a1,1,0,0,0,1.414,0l5-5a1,1,0,1,0-1.414-1.414Z">
                    </path>
                </svg>
            </a>
        </div>
    </div>
</div>

Related Examples

Footer for blog
https://github.com/tailwindow/component

Prem..

4 years ago

19.3k
Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
CTA with image

Fagundo67

3 years ago

10.5k
Responsive CTA

Lukas Müller

3 years ago

10.5k
Responsive footer
Footer section with icons

Prajwal Hallale

3 years ago

12.7k
Call to action section

Odessa Young

3 years ago

13.5k
Call to example
Call to example using radial-gradient

Oliver Hansen

3 years ago

9.6k
Basic footer

Mr Robot

3 years ago

15.5k
User dashboard

Anonymous

2 years ago

14k
Join Our Community Banner
Encourage users to become members of a community.

Diego Chavez

3 years ago

9k
Call to Action (for app stores)
Download app section with Playstore and Appstore button

Ron Hicks

4 years ago

12.2k
Footer
responsive footer

Aman kumar

2 years ago

9.5k