cta newsletter #01

<section>
  <div class="relative px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="items-end grid grid-cols-1 gap-4 sm:grid-cols-2">
      <div>
        <h2
          class="text-2xl md:text-3xl lg:text-4xl font-semibold text-base-900"
        >
          Join our newsletter
        </h2>
        <p class="text-base mt-4 font-medium text-base-500">
          Stay up to date with our latest news and updates.
        </p>
      </div>
      <form class="w-full mt-8 sm:flex sm:max-w-md sm:ml-auto">
        <label class="text-base sr-only"> Email address </label>
        <input
          id="email-address"
          type="email"
          name="email-address"
          autocomplete="email"
          placeholder="Enter your email"
          aria-placeholder="Enter your email"
          required=""
          class="block w-full h-10 px-4 py-2 text-sm bg-white border border-transparent rounded-lg appearance-none text-blue-700 duration-300 ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:bg-transparent focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
        />
        <div class="mt-2 sm:ml-2 sm:mt-0 sm:flex-shrink-0">
          <button
            class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-accent-600 shadow-sm h-10 px-6 py-3 text-base rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full sm:w-auto"
            type="submit"
          >
            Subscribe
          </button>
        </div>
      </form>
    </div>
  </div>
</section>