Newsletter One

Stay Informed with the Latest Trends

Subscribe to receive our exclusive insights

Join Now

By subscribing, you accept our Terms and Conditions and Privacy Statement .

@import url("/template/basic-library/section/newsletter/newsletter-one/raw/styles.css");

<div
  class="bg-white pt-6 pb-6 py-6 sm:pt-8 sm:pb-8 sm:py-8 lg:pt-12 lg:pb-12 lg:py-12"
>
  <div
    class="ml-auto mr-auto mx-auto max-w-screen-2xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8"
  >
    <div class="overflow-hidden flex rounded-lg bg-gray-100">
      <div class="relative hidden sm:block bg-gray-200 sm:w-1/3 lg:w-1/2">
        <img
          src="https://images.unsplash.com/photo-1604076913837-52ab5629fba9?auto=format&amp;q=75&amp;fit=crop&amp;w=750"
          loading="lazy"
          alt="Photo by mymind"
          class="absolute inset-0 h-full w-full object-cover object-center"
        />
      </div>
      <div
        class="flex w-full items-center pt-4 pr-4 pb-4 pl-4 sm:w-2/3 sm:pt-8 sm:pr-8 sm:pb-8 sm:pl-8 lg:w-1/2 lg:pl-10"
      >
        <div class="sm:block flex w-full flex-col items-center">
          <div class="mb-4 sm:mb-8">
            <h2
              class="text-center text-xl font-bold text-indigo-500 sm:text-left sm:text-2xl lg:text-3xl"
            >
              Stay Informed with the Latest Trends
            </h2>
            <p class="text-center text-gray-500 sm:text-left">
              Subscribe to receive our exclusive insights
            </p>
          </div>
          <form class="mb-3 flex w-full max-w-md gap-2 sm:mb-5">
            <input
              placeholder="Your Email Address"
              class="bg-gray-white placeholder-gray-400 transition duration-100 w-full flex-1 rounded border border-gray-300 pl-3 pr-3 px-3 pt-2 pb-2 py-2 text-gray-800 outline-none ring-indigo-300 focus:ring"
            />
            <button
              class="inline-block transition duration-100 active:bg-indigo-700 rounded bg-indigo-500 pl-8 pr-8 px-8 pt-2 pb-2 py-2 text-center text-sm font-semibold text-white outline-none ring-indigo-300 hover:bg-indigo-600 focus-visible:ring md:text-base"
            >
              Join Now
            </button>
          </form>
          <div class="text-center text-xs text-gray-400 sm:text-left">
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              By subscribing, you accept our
            </span>
            <a
              href="#"
              class="underline transition duration-100 active:text-indigo-600 hover:text-indigo-500"
            >
              Terms and Conditions
            </a>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              and
            </span>
            <a
              href="#"
              class="underline transition duration-100 active:text-indigo-600 hover:text-indigo-500"
            >
              Privacy Statement
            </a>
            <span
              data-node-handle="base-text"
              class="inline-block h-auto w-auto"
            >
              .
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>