Modern Subscription Card

<section class="relative w-full pb-10 mx-auto my-10 md:w-8/12">
  <div
    class="md:h-[70px] md:w-[70px] w-[40px] h-[40px] right-0 bg-gradient-to-r rounded-full grid place-items-center absolute md:-right-5 -top-5 from-[#747DEF] to-[#3A3F78] z-10 p-1"
  >
    <img src="https://maisam.dev/static/images/send.svg" />
  </div>
 
  <div class="relative">
    <div
      class="overflow-hidden relative w-full h-96 bg-[#DFD7F9] opacity-20 md:rounded-b-2xl md:rounded-tr-2xl md:rounded-tl-[6rem]"
    >
      <!-- right pattern -->
      <div class="absolute -top-10 -right-10 opacity-40">
        <img
          src="https://maisam.dev/static/images/right-pattern.svg"
          role="none"
          class="w-[182.804px] h-[145.877px] md:w-[284.804px] md:h-[290.877px]"
        />
      </div>
      <!-- left pattern -->
      <div class="absolute left-5 -bottom-32 opacity-40">
        <img
          src="https://maisam.dev/static/images/left-pattern.svg"
          role="none"
          class="w-[198.595px] h-[194.724px] md:w-[397.19px] md:h-[389.448px]"
        />
      </div>
    </div>
 
    <div class="absolute hidden md:block -right-24 -bottom-16">
      <img
        src="https://maisam.dev/static/images/bottom-pattern.svg"
        role="none"
      />
    </div>
    <div class="absolute top-0 flex items-center w-full h-full">
      <div class="flex flex-col items-center max-w-2xl mx-auto my-16">
        <h1
          class="max-w-sm text-xl leading-normal text-center text-gray-600 md:max-w-full md:text-2xl font-poppins"
        >
          Subscribe to get information, latest news and other interesting offers
          about Cobham
        </h1>
        <div class="flex flex-col w-full gap-5 mt-10 md:flex-row md:mt-20">
          <div class="relative w-full text-gray-600">
            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
              <img
                src="https://maisam.dev/static/images/email.svg"
                role="none"
                class="w-6 h-6"
              />
              <label for="email" class="p-1">
              </label>
            </span>
            <input
              type="email"
              name="q"
              class="p-5 pl-12 text-sm bg-white rounded-lg w-full md:h-[55px] focus:outline-none"
              placeholder="email@example.com"
              autocomplete="off"
              id="email"
              required
            />
          </div>
 
          <button
            class="bg-gradient-to-r inline-block from-[#FF946D] to-[#FF7D68] font-poppins px-7 py-2 rounded-lg text-white text-lg"
          >
            Subscribe
          </button>
        </div>
      </div>
    </div>
  </div>
</section>