Email CTA

No notes defined.

  • Handle: @tw-ui-email-cta
  • Preview:
  • Filesystem Path: components/10-other-examples/tailwind-ui-components/cta/email-cta.hbs
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">

    <div>
        <h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
            Want sports news and updates?
            <br />
            <span class="text-indigo-600">Sign up for our newsletter.
            </span>
        </h2>
        <p class="text-lg font-normal mt-2">Sign-up for our E-Newsletter to get email updates from Lethbridge Sport Council.</p>
    </div>

    <div class="mt-8 flex flex-col sm:flex-row">

        <div class="lg:pl-6">

            <label class="sr-only" for="email">Enter your email</label>
            <input class="h-12 border-solid border-4 rounded py-2 px-3 w-full" placeholder="Enter your email" type="email" id="email">

        </div>

        <input class="h-12 mt-4 sm:mt-0 sm:ml-6 bg-indigo-600 text-white font-bold text-sm py-2 px-4 rounded-md shadow" type="submit" value="Notify Me">

    </div>

</div>
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">

  <div>
    <h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
      {{ text1 }}
      <br />
      <span class="text-indigo-600">{{ text2 }}
      </span>
    </h2>
    <p class="text-lg font-normal mt-2">{{ text3 }}</p>
  </div>

  <div class="mt-8 flex flex-col sm:flex-row">

    <div class="lg:pl-6">

      <label class="sr-only" for="email">{{ text4 }}</label>
      <input class="h-12 border-solid border-4 rounded py-2 px-3 w-full" placeholder="Enter your email" type="email"
        id="email">

    </div>

    <input class="h-12 mt-4 sm:mt-0 sm:ml-6 bg-indigo-600 text-white font-bold text-sm py-2 px-4 rounded-md shadow"
      type="submit" value="Notify Me">

  </div>

</div>
{
  "text1": "Want sports news and updates?",
  "text2": "Sign up for our newsletter.",
  "text3": "Sign-up for our E-Newsletter to get email updates from Lethbridge Sport Council.",
  "text4": "Enter your email"
}