Newsletter

            <div class="container max-w-4xl py-20 text-gray-900 font-sans lg:py-32">
    <h2 class="text-xl font-bold md:text-2xl lg:text-3xl">Vulputate Ullamcorper</h2>
    <p class="mt-2 text-gray-700 text-lg md:mt-4">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    <form action="#">
        <div class="mt-8 max-w-xl space-y-4">
            <div>
                <label for="example-input-1" class="block text-gray-800 text-sm">Purus</label>
                <div class="mt-1 flex items-stretch">
                    <input id="example-input-1" type="text" class=" w-full px-5 py-3 bg-gray-200 border-transparent" placeholder="">
                    <button class="btn px-3 text-white bg-black hover:bg-gray-800">Etiam</button>
                </div>
            </div>
            <div class="flex items-center">
                <input id="example-input-2" type="checkbox" class="text-gray-400 focus:ring-offset-0">
                <label for="example-input-2" class="ml-3 inline-block text-gray-600 text-sm">Aenean eu leo quam lorem ipsum</label>
            </div>
        </div>
    </form>
</div>

        

            <div class="container py-8">
    <div class="px-4 py-16 text-gray-900 font-sans border border-gray-400 lg:py-20 lg:px-16">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
                <h2 class="text-xl font-bold md:text-2xl lg:text-3xl">Vulputate Ullamcorper</h2>
                <p class="mt-2 text-gray-700 text-lg md:mt-4">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                <!-- Add vertical spacing as needed to push form downwards -->
                <div id="spacer" class="hidden md:block h-10"></div>
            </div>        
            <form class="flex flex-col justify-end" action="#">
                <div>
                    <label for="example-input-1" class="block text-gray-800 text-sm">Purus</label>
                    <div class="mt-1 flex items-stretch">
                        <input id="example-input-1" type="text" class="w-full px-5 py-3 bg-gray-200 border-transparent" placeholder="">
                        <button class="btn ml-2 text-white bg-black hover:bg-gray-800">Etiam</button>
                    </div>
                    <p class="mt-2 text-sm text-gray-700">
                        Aenean eu leo quam lorem ipsum
                        <a href="#" class="font-bold hover:underline">Privacy Policy</a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>