Newsletter sections

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="mx-auto py-20 max-w-7xl">
    <h2 class="font-light text-4xl text-purple-700 text-center">Subscribe to our newsletter</h2>
    <div class="flex justify-center gap-10 py-10 px-5 md:flex-row flex-col">
        <input class="p-4 bg-gray-100 font-light md:w-auto w-full" type="text" placeholder="First Name *">
        <input class="p-4 bg-gray-100 font-light md:w-auto w-full" type="text" placeholder="Last Name *">
        <input class="p-4 bg-gray-100 font-light md:w-auto w-full" type="text" placeholder="Email Address *" name="email">
    </div>
    <div class="flex justify-center">
        <button class="px-5 py-2 text-xl bg-purple-700 text-white font-medium rounded-tl-3xl rounded-br-3xl">Submit</button>
    </div>
</div>
<div class="max-w-7xl mx-auto">
    <div class="grid grid-cols-12">
        <div class="md:row-span-full md:col-end-12  md:col-span-6 col-span-12">
            {{ cms_image('img') }}
        </div>
        <div class="md:row-span-full md:col-start-2 md:col-span-6 col-span-12 flex items-center md:p-0 p-5"> 
          <div>
            <div class="bg-white backdrop-blur-xl bg-opacity-50 p-5 shadow">
              <div class="text-blue-900 text-4xl font-bold">{{ cms_heading('header') }}</div>
              <p class="text-gray-700 mt-4">{{ cms_text('text') }}</p>
            </div>
            <div class="bg-white backdrop-blur-xl bg-opacity-50 shadow mt-5 flex">
                <input type="text" class="w-10/12 py-4 px-4" placeholder="Email Address *">
                <div class="w-2/12 h-auto bg-blue-900 text-white text-center flex items-center justify-center">→</div>
              </div>
          </div>
    </div>
</div>