Content sections

<!-- This example requires Tailwind CSS v2.0+ -->
<div class="mx-auto max-w-7xl py-20">
    <div class="grid grid-cols-12 md:gap-10">
        <div class="md:col-span-8 col-span-12  flex items-center py-20">
            <div class="px-10 font-light">
                <h2 class="text-5xl font-bold">{{ cms_heading('heading') }}</h2>
                {{ cms_text('text-content') }}
                {{ cms_button('content-button-1',{'theme': 'px-4 py-2 bg-green-600 rounded hover:shadow font-medium mt-4'}) }}
            </div>
        </div>
        <div class="md:col-span-4 col-span-12 relative pl-20">
            <div class="flex items-center h-full bg-green-600">
                <img class="w-full -ml-10 h-5/6 object-center object-cover" src="" alt="">
            </div>
        </div>
    </div>
</div>
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="mx-auto max-w-7xl">
    <div class="py-10">
        <div class="flex justify-center z-10">
            <div class="text-left p-10">
                <h2 class="sm:text-5xl text-3xl font-bold">{{ cms_heading('heading') }}</h2>
                {{ cms_text('text-content-1') }}
                <img class=" rounded-lg w-full object-center mt-4" src="" alt="">
                {{ cms_text('text-content-2') }}
                {{ cms_button('content-button-1',{'theme': 'px-4 py-2 bg-blue-900 text-white rounded hover:shadow font-bold mt-4'}) }}
            </div>
        </div>
    </div>
</div>
<div class="mx-auto max-w-7xl bg-gradient-to-b from-gray-50">
    <div class="py-10">
        <div class="grid grid-cols-6 gap-10 px-10">
            <div class="md:col-span-3 col-span-6 bg-white rounded-xl shadow md:order-1 order-2">
                <img class="h-full w-full rounded-xl" src="" alt="">
            </div>
            <div class="md:col-span-3 col-span-6 bg-white p-5 rounded-xl shadow md:order-2 order-1">
                <h2 class="sm:text-5xl text-3xl font-bold">{{ cms_heading('heading') }}</h2>
                {{ cms_text('text-content-1') }}
            </div>
        </div>
    </div>
</div>