Price sections

<!-- This example requires Tailwind CSS v2.0+ -->

    <div class="grid grid-cols-12">
        <div class="md:col-span-4 md:py-20 md:-mr-5 md:ml-5 py-5 col-span-12">
            <div class="rounded-xl shadow-lg border">
                <div class="text-4xl font-bold px-10 pt-10">
                   {{ cms_heading('price-1') }}
                </div>
                <div class="pb-6 pt-2 px-10 text-xl text-gray-800">
                    {{ cms_heading('price-1-title') }}
                </div>
                <div class="py-6 px-10 text-gray-800 border-b border-dashed">
                    {{ cms_text('price-1-text') }}
                </div>
                <div class="p-10">
                    {{ cms_button('price-button-1',{'theme': 'bg-gray-50 text-gray-600 rounded-xl text-center w-full py-3 shadow-inner'}) }}
                </div>
            </div>
        </div>
        <div class="md:col-span-4 md:py-5 z-10 col-span-12 ">
            <div class="rounded-xl shadow-lg border bg-white">
                <div class="text-4xl font-bold px-10 pt-10">
                    {{ cms_heading('price-2') }}
                </div>
                <div class="pb-6 pt-2 px-10 text-xl text-gray-800">
                    {{ cms_heading('price-2-title') }}
                </div>
                <div class="py-6 px-10 text-gray-800 border-b border-dashed">
                    {{ cms_text('price-2-text') }}
                </div>
                <div class="py-6 px-10 text-gray-800 ">
                    {{ cms_text('price-2-text-2') }}
                </div>
                <div class="p-10">
                    {{ cms_button('price-button-2',{'theme': 'bg-gray-50 text-gray-600 rounded-xl text-center w-full py-3 shadow-inner'}) }}
                </div>
            </div>
        </div>
        <div class="md:col-span-4 md:py-20 md:-ml-5 md:mr-5 py-5 col-span-12">
            <div class="rounded-xl shadow-lg border">
                <div class="text-4xl font-bold px-10 pt-10">
                    {{ cms_heading('price-1') }}
                </div>
                <div class="pb-6 pt-2 px-10 text-xl text-gray-800">
                    {{ cms_heading('price-3-title') }}
                </div>
                <div class="py-6 px-10 text-gray-800 border-b border-dashed">
                    {{ cms_text('price-3-text') }}
                </div>
                <div class="p-10">
                    {{ cms_button('price-button-3',{'theme': 'bg-gray-50 text-gray-600 rounded-xl text-center w-full py-3 shadow-inner'}) }}
                </div>
            </div>
        </div>
    </div>
<div class="max-w-7xl mx-auto py-20">
    <div class="grid grid-cols-12 md:divide-x md:divide-y-0 divide-y text-center">
        <div class="md:col-span-4 col-span-12 md:p-10 p-5">
            <div class="text-4xl font-bold  pt-10">
                {{ cms_heading('price-1') }}
            </div>
            <div class="pb-6 pt-4 text-xl text-gray-800">
                {{ cms_heading('price-1-title') }}
            </div>
            <div class="py-6  text-gray-800">
                {{ cms_text('price-1-text') }}
            </div>
            <div class="p-10">
                {{ cms_button('price-button-1',{'theme': 'bg-green-50 text-green-600 w-full py-3'}) }}
            </div>
        </div>
        <div class="md:col-span-4 col-span-12  md:p-10 p-5">
            <div class="text-4xl font-bold  pt-10">
                {{ cms_heading('price-2') }}
            </div>
            <div class="pb-6 pt-4 text-xl text-gray-800">
                {{ cms_heading('price-2-title') }}
            </div>
            <div class="py-6  text-gray-800">
                {{ cms_text('price-2-text') }}
            </div>
            <div class="p-10">
                {{ cms_button('price-button-2',{'theme': 'bg-red-50 text-red-600 w-full py-3'}) }}
            </div>
        </div> 
        <div class="md:col-span-4 col-span-12  md:p-10 p-5">
            <div class="text-4xl font-bold  pt-10">
                {{ cms_heading('price-3') }}
            </div>
            <div class="pb-6 pt-4 text-xl text-gray-800">
                {{ cms_heading('price-3-title') }}
            </div>
            <div class="py-6  text-gray-800">
                {{ cms_text('price-3-text') }}
            </div>
            <div class="p-10">
                {{ cms_button('price-button-3',{'theme': 'bg-blue-50 text-blue-600 w-full py-3'}) }}
            </div>
        </div>
    </div>
</div>