Skip to main content

Subscribe

Simple center aligned

Open this centered subscribe example in new window
Copy centered subscribe code 
<!-- Subscribe -->
<div class="max-w-6xl py-10 px-4 sm:px-6 lg:px-8 lg:py-16 mx-auto">
  <div class="max-w-xl text-center mx-auto">
    <div class="mb-5">
      <h2 class="text-2xl text-hs2-primary font-bold md:text-3xl md:leading-tight ">Sign up to our newsletter</h2>
    </div>

    <form>
      <div class="mt-5 lg:mt-8 flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
        <div class="w-full">
          <label for="hero-input" class="sr-only">Search</label>
          <input type="text" id="hero-input" name="hero-input" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-md focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary " placeholder="Enter your email">
        </div>
        <a class="w-full sm:w-auto whitespace-nowrap inline-flex justify-center items-center gap-x-3 text-center bg-hs2-primary hover:bg-hs2-primary-600 border border-transparent text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
          Subscribe
        </a>
      </div>
    </form>
  </div>
</div>
<!-- End Subscribe -->
Close centered subscribe code

Simple right aligned

Open this right aligned subscribe example in new window
Copy right aligned subscribe code 
<!-- Subscribe -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-16 mx-auto">
  <div class="grid md:grid-cols-2 gap-8">
    <div class="max-w-md">
      <h2 class="text-2xl text-hs2-primary font-bold md:text-3xl md:leading-tight ">Subscribe</h2>
      <p class="mt-3 text-hs2-text-light ">
        Subscribe and start making the most of every engagement.
      </p>
    </div>

    <form>
      <div class="w-full sm:max-w-lg md:ml-auto">
        <div class="flex flex-col items-center gap-2 sm:flex-row sm:gap-3">
          <div class="w-full">
            <label for="hero-input" class="sr-only">Search</label>
            <input type="text" id="hero-input" name="hero-input" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-md focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary " placeholder="Enter your email">
          </div>
          <a class="w-full sm:w-auto whitespace-nowrap inline-flex justify-center items-center gap-x-3 text-center bg-hs2-primary hover:bg-hs2-primary-600 border border-transparent text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-hs2-primary-500 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
            Subscribe
          </a>
        </div>
        <p class="mt-3 text-sm text-hs2-text-light">
          No spam, unsubscribe at any time
        </p>
      </div>
    </form>
  </div>
</div>
<!-- End Subscribe -->
Close right aligned subscribe code